জুলাইয়ে ওয়েব প্ল্যাটফর্মে নতুন

জুলাই 2024 এর মধ্যে স্থিতিশীল এবং বিটা ওয়েব ব্রাউজারে অবতরণ করা কিছু আকর্ষণীয় বৈশিষ্ট্য আবিষ্কার করুন।

Rachel Andrew

স্থিতিশীল ব্রাউজার রিলিজ

জুলাই 2024 সালে, Firefox 128 , Safari 17.6 , এবং Chrome 127 স্থিতিশীল হয়ে ওঠে। এই পোস্টটি ওয়েব প্ল্যাটফর্মে যোগ করা নতুন বৈশিষ্ট্যগুলি দেখে।

CSS আপেক্ষিক রঙ সিনট্যাক্স

Firefox 128-এ CSS আপেক্ষিক রঙের সিনট্যাক্স রয়েছে, এটি আপনাকে একটি মূল রঙের সাথে সম্পর্কিত একটি রঙ তৈরি করতে দেয়। নিচের CSS hsl() ব্যবহার করে indigo রঙের অর্ধেক ডিস্যাচুরেট করে।

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

আপনি ব্লগ পোস্ট CSS আপেক্ষিক রঙ সিনট্যাক্সে আরও অনেক উদাহরণ খুঁজে পেতে পারেন। আপেক্ষিক রঙের সিনট্যাক্স হল ইন্টারপ 2024-এর ফোকাস ক্ষেত্রগুলির মধ্যে একটি, তাই এই আপডেটটি স্থিতিশীল ফায়ারফক্সের স্কোর উন্নত করতে সাহায্য করে।

content সম্পত্তির জন্য বিকল্প পাঠ্য

Firefox 128 CSS content সম্পত্তির জন্য বিকল্প টেক্সট সমর্থন করে, যখন এটি একটি চিত্র অন্তর্ভুক্ত করে। Alt টেক্সটটি অ্যাক্সেসিবিলিটি ট্রিতে উন্মুক্ত হয়। এর মানে হল যে বিকল্প পাঠ্য এখন content জন্য সমস্ত ব্রাউজার দ্বারা সমর্থিত।

Chrome 127-এ একটি আপডেট নিশ্চিত করে যে Chrome শুধুমাত্র একটি একক স্ট্রিংয়ের পরিবর্তে একটি নির্বিচারে সংখ্যক উপাদান গ্রহণ করে, উদাহরণস্বরূপ, attr() ফাংশনের ব্যবহার সক্ষম করে৷

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

ক্রোম 127-এ font-size-adjust রয়েছে, এটি ইন্টারপ 2024-এর জন্য একটি ফোকাস এলাকাও। এই বৈশিষ্ট্যটি এমন পরিস্থিতিতে উপযোগী যেখানে ফন্ট ফলব্যাক ঘটতে পারে, কারণ এটি আপনাকে প্রথম পছন্দের ফন্টের সাথে একটি ফলব্যাক ফন্টের আকার মেলাতে সাহায্য করে।

এই ক্রোম রিলিজের মাধ্যমে font-size-adjust প্রপার্টি বেসলাইন নিউলি অ্যাভেলেবলের অংশ হয়ে যায়।

আইফ্রেমে ভিউ ট্রানজিশন API-এর জন্য সমর্থন

Chrome 127 থেকে একটি প্রধান ফ্রেমে এবং একই-অরিজিন iframe-এ সমসাময়িক একই-ডকুমেন্ট ভিউ ট্রানজিশন পাওয়া যাবে।

পূর্বে, একই-অরিজিন আইফ্রেমে document.startViewTransition ব্যবহার করে একটি ভিউ ট্রানজিশন চালানো কাজ করবে না যদি মূল ফ্রেম একই সময়ে একটি ট্রানজিশন চালায়। iframe এর রূপান্তর স্বয়ংক্রিয়ভাবে এড়িয়ে যাবে। এখন, উভয় রূপান্তর কার্যকর হবে।

কীবোর্ড ফোকাসযোগ্য স্ক্রল পাত্রে

ক্রোম থেকে 127 স্ক্রোলারগুলি ডিফল্টরূপে ক্লিক-ফোকাসযোগ্য এবং প্রোগ্রামগতভাবে-ফোকাসযোগ্য। ফোকাসযোগ্য শিশুদের ছাড়া স্ক্রলারগুলি ডিফল্টরূপে কীবোর্ড-ফোকাসযোগ্য।

পোস্ট কীবোর্ড ফোকাসযোগ্য স্ক্রোলারে এই পরিবর্তন সম্পর্কে আরও জানুন।

@property নিয়ম

Firefox 128-এ @property নিয়ম এবং সম্পর্কিত JavaScript API-এর জন্য সমর্থন রয়েছে। এর মানে হল আপনি CSS কাস্টম বৈশিষ্ট্য তৈরি করতে পারেন যা একটি সিনট্যাক্স, উত্তরাধিকার এবং একটি প্রাথমিক মান নির্ধারণ করে।

নিম্নলিখিত উদাহরণে কাস্টম প্রপার্টিটিকে শুধুমাত্র একটি <color> মান গ্রহণ করার জন্য, উত্তরাধিকারী না হওয়ার জন্য এবং hotpink এর একটি প্রাথমিক মান থাকতে সংজ্ঞায়িত করা হয়েছে।

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

@property নিয়ম এখন নতুনভাবে উপলব্ধ বেসলাইনের অংশ, @property-এ আরও পড়ুন: সর্বজনীন ব্রাউজার সমর্থন সহ নেক্সট-জেন CSS ভেরিয়েবল ।

আকার পরিবর্তনযোগ্য ArrayBuffer এবং বৃদ্ধিযোগ্য SharedArrayBuffer

রিসাইজযোগ্য ArrayBuffer এবং ক্রমবর্ধমান SharedArrayBuffer এখন Firefox 128-এ সমর্থিত, যাতে একটি নতুন বাফার বরাদ্দ না করে এবং এতে ডেটা কপি না করেই বাফারের আকার পরিবর্তন করা যায়। এই বৈশিষ্ট্যগুলিও নতুনভাবে উপলব্ধ বেসলাইনে যোগদান করে৷

flexbox বৈশিষ্ট্য safe কীওয়ার্ড

Safari 17.6 বেশিরভাগই বিদ্যমান বৈশিষ্ট্যগুলির সংশোধনগুলির একটি প্রকাশ, তবে এটিতে flexbox প্রান্তিককরণ বৈশিষ্ট্যগুলির জন্য safe কীওয়ার্ডও অন্তর্ভুক্ত রয়েছে। এটি ব্রাউজার জুড়ে safe কীওয়ার্ডকে ইন্টারঅপারেবল করে তোলে।

safe কীওয়ার্ডটি একটি নির্বাচিত প্রান্তিককরণকে দর্শনযোগ্য এলাকার বাইরে সামগ্রী প্রদর্শন করতে বাধা দেয়। নিম্নলিখিত কোডপেন দেখায় কিভাবে এটি কেন্দ্রে সারিবদ্ধ আইটেমগুলির সাথে কাজ করে। যদি center প্রান্তিককরণ ডেটা ক্ষতির কারণ হয় তবে এর পরিবর্তে start ব্যবহার করা হয়।

বিটা ব্রাউজার রিলিজ

বিটা ব্রাউজার সংস্করণগুলি আপনাকে সেই জিনিসগুলির একটি পূর্বরূপ দেয় যা ব্রাউজারের পরবর্তী স্থিতিশীল সংস্করণে থাকবে৷ নতুন বৈশিষ্ট্যগুলি পরীক্ষা করার জন্য এটি একটি দুর্দান্ত সময়, বা অপসারণ, যা বিশ্ব এই প্রকাশ পাওয়ার আগে আপনার সাইটকে প্রভাবিত করতে পারে৷ নতুন বিটা হল Firefox 129 এবং Chrome 128 । সাফারি 18 বিটা এখনও চলছে। এই প্রকাশগুলি প্ল্যাটফর্মে অনেক দুর্দান্ত বৈশিষ্ট্য নিয়ে আসে। সমস্ত বিবরণের জন্য রিলিজ নোটগুলি দেখুন। এখানে মাত্র কয়েকটি হাইলাইট রয়েছে।

Chrome 128-এ CSS ruby-align প্রপার্টি অন্তর্ভুক্ত রয়েছে, যার সাথে display: ruby ​​, zoom প্রপার্টিও স্পেসিফিকেশনের সাথে মেলে আপডেট করা হয়েছে। AudiContext.onerror এ বরাদ্দ করা একটি কলব্যাক যোগ করার জন্য AudioContext API-তে একটি আপডেট রয়েছে, যা AudioContext তৈরি এবং রেন্ডারিং ত্রুটির রিপোর্ট করে৷

ফায়ারফক্স 129-এ @starting-style নিয়ম এবং transition-behavior বৈশিষ্ট্য অন্তর্ভুক্ত রয়েছে। Firefox 129 স্থিতিশীল অবস্থায় প্রকাশিত হলে এই বৈশিষ্ট্যগুলি নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে যাবে।