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

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

Rachel Andrew

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

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

MDN থেকে ব্রাউজার সামঞ্জস্যপূর্ণ ডেটা এই পোস্টগুলিতে অন্তর্ভুক্ত করা হয়েছে এবং খুব সাম্প্রতিক ব্রাউজার রিলিজের জন্য এখনও আপডেট করা হয়নি। পোস্টটি ব্রাউজার-কম্প্যাট-ডেটা রিলিজে প্রদর্শিত হওয়ার সাথে সাথে সঠিক তথ্য দেখাবে।

light-dark() এর সাথে রঙের স্কিমগুলি মানিয়ে নিন

light-dark() রঙ ফাংশনটি Chrome 123-এ অবতরণ করেছে এবং এটি ব্যবহারকারীর পছন্দের সাথে রঙের স্কিমগুলিকে মানিয়ে নেওয়া সহজ করে তোলে। নিচের উদাহরণে color-scheme root উপর light dark সেট করা হয়েছে। কাস্টম বৈশিষ্ট্যগুলি রঙ সেট করতে light-dark() রঙ ফাংশন ব্যবহার করে যা ব্যবহারকারীর আলো বা অন্ধকার মোড পছন্দের উপর নির্ভর করে এর মধ্যে পরিবর্তন করা হবে।

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

CSS color-scheme -নির্ভর রং-এর সাথে light-dark() এ আরও উদাহরণ ও বিবরণ খুঁজুন

ব্রাউজার সমর্থন

• 123
• 123
• 120
• 17.5

উৎস

field-sizing সহ ইনপুটগুলির আরও ভাল নিয়ন্ত্রণ

এছাড়াও Chrome 123-এ, field-sizing বৈশিষ্ট্য স্বয়ংক্রিয়ভাবে ক্রমবর্ধমান পাঠ্য ইনপুট ক্ষেত্রগুলিকে সক্ষম করে।

ব্রাউজার সমর্থন

• 123
• 123
• x
• x

উৎস

text-spacing-trim সহ CJK বিরাম চিহ্নের জন্য কার্নিং

Chrome 123-এ, text-spacing-trim বৈশিষ্ট্যটি অত্যধিক ব্যবধান সামঞ্জস্য করতে চাইনিজ, জাপানি এবং কোরিয়ান (CJK) বিরামচিহ্ন অক্ষরগুলিতে কার্নিং প্রয়োগ করে। CSS-এর জন্য চারটি নতুন আন্তর্জাতিক বৈশিষ্ট্য প্রবর্তনে আরও পড়ুন।

ব্রাউজার সমর্থন

• 123
• 123
• x
• x

উৎস

@scope CSS অ্যাট-রুল

Safari 17.4-এ @scope অন্তর্ভুক্ত রয়েছে যা আপনাকে নির্দিষ্ট DOM সাবট্রিতে উপাদান নির্বাচন করতে দেয়, অত্যধিক-নির্দিষ্ট নির্বাচককে ওভাররাইড করা কঠিন না লিখে এবং আপনার নির্বাচকদের DOM কাঠামোর সাথে খুব শক্তভাবে সংযুক্ত না করেই উপাদানগুলিকে লক্ষ্য করে।

CSS @scope এট-রুলের মাধ্যমে আপনার নির্বাচকদের নাগালের সীমাবদ্ধতায় আরও জানুন

ব্রাউজার সমর্থন

• 118
• 118
• 
• 17.4

উৎস

ছবির মধ্যে ছবি উন্নতি

Chrome 123-এ পিকচার-ইন-পিকচার অভিজ্ঞতা উন্নত করার জন্য দুটি বৈশিষ্ট্য রয়েছে। প্রথমটি হল CSS picture-in-picture ডিসপ্লে মোড । এটি আপনাকে নির্দিষ্ট CSS নিয়মগুলি লিখতে দেয় যা শুধুমাত্র তখনই প্রয়োগ করা হয় যখন (অংশের) ওয়েব অ্যাপটি পিকচার-ইন-পিকচার মোডে দেখানো হয়।

দ্বিতীয় বৈশিষ্ট্যটি আপনাকে একটি ডকুমেন্ট পিকচার-ইন-পিকচার উইন্ডো থেকে opener.focus ব্যবহার করতে দেয় যাতে ডকুমেন্ট পিকচার-ইন-পিকচার উইন্ডোর মালিক ট্যাবে সিস্টেম-লেভেল ফোকাস আনা যায়।

এটি আপনাকে প্রয়োজনে মূল ট্যাবটিকে ফোরগ্রাউন্ডে ফিরিয়ে আনতে দেয়। উদাহরণস্বরূপ, যখন ব্যবহারকারীকে একটি UI অভিজ্ঞতা অ্যাক্সেস করতে হবে যা ছোট পিকচার-ইন-পিকচার উইন্ডোতে ফিট করে না।

ব্লক এবং টেবিল লেআউটে align-content জন্য সমর্থন

ক্রোম 123 এবং সাফারি 17.4 ব্লক এবং টেবিল লেআউটে align-content জন্য সমর্থন অন্তর্ভুক্ত করে। align-content সমর্থন পরিবর্তন সম্পর্কে পড়ুন.

সার্ভিস ওয়ার্কার স্ট্যাটিক রাউটিং API

Chrome 123 থেকে, সার্ভিস ওয়ার্কার স্ট্যাটিক রাউটিং API পাওয়া যায়। এই API আপনাকে ঘোষণামূলকভাবে বলতে দেয় যে কীভাবে নির্দিষ্ট রিসোর্স পাথগুলি আনতে হবে, মানে ব্রাউজারটিকে শুধুমাত্র ক্যাশে থেকে বা সরাসরি নেটওয়ার্ক থেকে প্রতিক্রিয়া আনতে পরিষেবা কর্মী চালানোর প্রয়োজন নেই৷

নির্দিষ্ট পাথের জন্য পরিষেবা কর্মীকে বাইপাস করতে পরিষেবা কর্মী স্ট্যাটিক রাউটিং API ব্যবহার করুন- এ আরও জানুন৷

দীর্ঘ অ্যানিমেশন ফ্রেম API

ক্রোম 123 এ লং অ্যানিমেশন ফ্রেম এপিআইও রয়েছে, যা ধীরগতির ইউজার ইন্টারফেস (UI) আপডেটগুলিকে আরও ভালভাবে বোঝার জন্য লং টাস্ক API-এর একটি আপডেট। এটি ধীরগতির অ্যানিমেশন ফ্রেমগুলি সনাক্ত করতে কার্যকর হতে পারে যা ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) কোর ওয়েব ভাইটাল মেট্রিককে প্রভাবিত করতে পারে যা প্রতিক্রিয়াশীলতা পরিমাপ করে, বা মসৃণতাকে প্রভাবিত করে এমন অন্যান্য UI জ্যাঙ্ক সনাক্ত করতে।

ব্রাউজার সমর্থন

• 123
• 123
• x
• x

উৎস

content-visibility বৈশিষ্ট্য

Firefox 124-এ CSS content-visibility বৈশিষ্ট্যের জন্য সমর্থন অন্তর্ভুক্ত রয়েছে। এই বৈশিষ্ট্যটি নিয়ন্ত্রণ করে যে কোনও উপাদান তার সামগ্রী আদৌ রেন্ডার করে কিনা, ব্রাউজারগুলিকে এটির প্রয়োজন না হওয়া পর্যন্ত সামগ্রী রেন্ডার করা বাদ দেওয়ার অনুমতি দেয়।

ব্রাউজার সমর্থন

• 85
• 85
• 125
• 18

উৎস

ArrayBuffer এবং অ্যারে গ্রুপিংয়ের সংযোজন

Safari 17.4-এ JavaScript detached সম্পত্তি এবং ArrayBuffer এর transfer() transferToFixedLength() পদ্ধতির সমর্থন সহ কিছু নতুন বৈশিষ্ট্য পায়।

ব্রাউজার সমর্থন

• 114
• 114
• 122
• 17.4

উৎস

Safari 17.4 এছাড়াও অ্যারে গ্রুপিং পদ্ধতি অন্তর্ভুক্ত করে Object.groupBy এবং Map.groupBy । অ্যারে গ্রুপিং সম্পর্কে আরও জানতে, পড়ুন JavaScript অ্যারে গ্রুপিং পদ্ধতি পাচ্ছে ।

ব্রাউজার সমর্থন

• 117
• 117
• 119
• 17.4

উৎস

এই বৈশিষ্ট্যগুলি এখন ইন্টারঅপারেবল এবং তাই নতুনভাবে উপলব্ধ বেসলাইনে যোগদান করুন৷

setHTMLUnsafe এবং parseHTMLUnsafe

Safari 17.4-এ setHTMLUnsafe এবং parseHTMLUnsafe পদ্ধতি শিপিং জাভাস্ক্রিপ্ট থেকে ঘোষণামূলক শ্যাডো DOM ব্যবহার করার অনুমতি দেয়। এই পদ্ধতিগুলি innerHTML বা DOMParser এর তুলনায় HTML-কে অপরিহার্যভাবে DOM-এ পার্স করার একটি সহজ উপায়ও অফার করে।

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

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

Firefox 125 একটি উত্তেজনাপূর্ণ রিলিজ হতে চলেছে৷ এটি ব্লকগুলিতে align-content অন্তর্ভুক্ত করে, এই বৈশিষ্ট্যটিকে আন্তঃপ্রক্রিয়াযোগ্য করে তোলে। এছাড়াও অন্তর্ভুক্ত, এবং তাই নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে উঠছে, হল পপওভার API। transition-behavior সম্পত্তিও সমর্থিত হবে। পপওভার এবং transition-behavior ইন্টারপ 2024- এর অংশ।

ক্রোম 124 জাভাস্ক্রিপ্ট থেকে ঘোষণামূলক শ্যাডো DOM ব্যবহার করার অনুমতি দেওয়ার জন্য setHTMLUnsafe এবং parseHTMLUnsafe পদ্ধতিগুলি অন্তর্ভুক্ত করে, এই বৈশিষ্ট্যগুলিকে আন্তঃপ্রক্রিয়াযোগ্য করে তোলে। এছাড়াও WebSocketStream API , এবং writingsuggestions বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়েছে।