ইন্টারপ 2024 মধ্য বছরের আপডেট

Rachel Andrew

বছরের দ্বিতীয়ার্ধে যাওয়ার সময়, এই বছর ইন্টারপ 2024 কীভাবে ওয়েব ইন্টারঅপারেবিলিটি উন্নত করেছে তা দেখার জন্য এটি একটি দুর্দান্ত সময়।

যেখানে আমরা শুরু করেছি

বছরের শুরুতে , ক্রোমের একটি পরীক্ষামূলক ব্রাউজার সমর্থন স্কোর ছিল 83।

জুন মাসে Chrome 126 রিলিজ হওয়ার পর স্থিতিশীল ব্রাউজারগুলির জন্য 85 স্কোর সহ আজ সেই স্কোর 90। সামগ্রিক পরীক্ষামূলক ইন্টারপ স্কোর 10 পয়েন্ট বেড়েছে, এবং এই পোস্টটি সেই স্কোরে অবদান রাখে এমন কিছু বৈশিষ্ট্য শেয়ার করেছে।

পপওভার

পপওভার 2024 সালের এপ্রিলে নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে ওঠে। পপওভারটি উত্তেজনাপূর্ণ কারণ আপনার তৈরি করার জন্য অনেকগুলি UI বৈশিষ্ট্য-উদাহরণস্বরূপ, মেনু, টুলটিপস, নির্বাচন করার জন্য ওভারলে এবং UI শেখানো- হল পপওভারের প্রকার। পপওভারের আগে, এই বৈশিষ্ট্যগুলির যেকোনো একটি তৈরি করা অনেকগুলি কাস্টম কোড জড়িত। একাধিক উপাদান একবারে খোলা হয়নি তা নিশ্চিত করতে বা ব্যবহারকারী উপাদানের বাইরে ক্লিক করলে হালকা-খারিজ সক্ষম করতে কোড। একটি UI উপাদান বাকি ইন্টারফেসের উপরে থাকে তা নিশ্চিত করতে আপনি z-index এর সাথেও লড়াই করতে পারেন।

এই সমস্ত বৈশিষ্ট্য এবং আরও অনেক কিছু Popover API- তে অন্তর্ভুক্ত করা হয়েছে, বিকাশের সময় সাশ্রয় করে এবং আরও কার্যকরী এবং অ্যাক্সেসযোগ্য ইন্টারফেস তৈরি করতে সহায়তা করে। উদাহরণস্বরূপ, নিম্নোক্ত কোডটি হালকা-খারিজ সহ একটি পপওভার তৈরি করে, যা খোলা হলে অন্যান্য পপওভার স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে।

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

বেসলাইনে পপওভার API ল্যান্ডগুলিতে আরও জানুন। অনেক অ্যাপ্লিকেশন ইতিমধ্যেই পপওভারের সুবিধা দেখতে পাচ্ছে। টোকোপিডিয়া অ-সমর্থক ব্রাউজারগুলির জন্য একটি পলিফিল ব্যবহার করে বৈশিষ্ট্যটির সুবিধা গ্রহণ করে প্রতিক্রিয়া কোডের পরিমাণ উল্লেখযোগ্যভাবে হ্রাস করতে সক্ষম হয়েছিল ।

@property সহ উন্নত কাস্টম বৈশিষ্ট্য

@property CSS নিয়ম আপনাকে উন্নত কাস্টম প্রপার্টি তৈরি করতে দেয়, স্ট্যান্ডার্ড কাস্টম প্রপার্টিতে উপলব্ধ নাম এবং মানের চেয়ে অনেক বেশি বিশদ সহ। এই বৈশিষ্ট্যটি কী ধরনের ডেটা ধারণ করে তা নির্ধারণ করতে অনুমোদিত সিনট্যাক্স সেট করুন—উদাহরণস্বরূপ রঙ, একটি সংখ্যা বা দৈর্ঘ্য। তারপর সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় কিনা এবং একটি প্রাথমিক মান সেট করুন।

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property নিয়মটি বর্তমানে Firefox-এর পরীক্ষামূলক স্কোরকে উন্নত করে, যখন Firefox 128 এই মাসের শেষের দিকে পাঠানো হয় তখন স্থিতিশীল স্কোর বাড়ায়। এটি নতুনভাবে উপলব্ধ বেসলাইনে যোগ দেয়।

@property-এ আরও জানুন: CSS ভেরিয়েবলকে সুপার পাওয়ার দেওয়া ।

font-size-adjust প্রপার্টি

CSS font-size-adjust বৈশিষ্ট্য আপনাকে বড় হাতের অক্ষরের আকারের তুলনায় ছোট হাতের অক্ষরগুলির আকার পরিবর্তন করতে দেয়। এটি এমন পরিস্থিতিতে দরকারী যেখানে ফন্ট ফলব্যাক ঘটতে পারে, কারণ এটি নিশ্চিত করতে সাহায্য করে যে একটি ফলব্যাক ফন্ট এখনও পাঠযোগ্য, বিশেষ করে ছোট ফন্টের আকারে।

font-size-adjust প্রপার্টিটি বর্তমানে Chrome-এর পরীক্ষামূলক স্কোরে অন্তর্ভুক্ত করা হয়েছে, তবে এই মাসে Chrome 127-এর সাথে রিলিজ হলে এটি স্থিতিশীল স্কোর বৃদ্ধি করবে। এটি নতুনভাবে উপলব্ধ বেসলাইনে যোগ দেয়।

text-wrap: ভারসাম্য

text-wrap: balance ব্রাউজারকে নির্দেশ দেয় টেক্সটের জন্য সেরা ব্যালেন্সড লাইন র‌্যাপিং বের করতে। এটি শিরোনামের জন্য বিশেষভাবে উপযোগী, উদাহরণস্বরূপ, লাইন দুই-এ একটি একক শব্দে শিরোনাম মোড়ানো প্রতিরোধ করে।

এটি সম্প্রতি Safari দ্বারা সমর্থিত হয়েছে, অন্যান্য ব্রাউজারগুলি সমস্ত ব্রাউজারে এই বৈশিষ্ট্যটি ভালভাবে কাজ করে তা নিশ্চিত করার জন্য ব্যর্থ পরীক্ষাগুলি ঠিক করার জন্য কাজ করছে৷

এই প্রধান বৈশিষ্ট্যগুলি আন্তঃপ্রক্রিয়াযোগ্য হয়ে উঠার পাশাপাশি, আরও অনেক উন্নতি করা হয়েছে। প্রতিটি পরীক্ষায় উত্তীর্ণ হয় এমন একটি আন্তঃব্যবহারযোগ্যতা সমস্যা উপস্থাপন করে যা আপনি চালাতে পারবেন না। বছরের শেষ নাগাদ আমরা সেই 100% স্কোরের কতটা কাছাকাছি যেতে পারি তা দেখে আমরা উত্তেজিত।