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

সেপ্টেম্বর ২০২৬ চলাকালীন স্টেবল এবং বেটা ওয়েব ব্রাউজারগুলোতে যুক্ত হওয়া কিছু আকর্ষণীয় ফিচার সম্পর্কে জানুন।

র‍্যাচেল অ্যান্ড্রু

প্রকাশিত: ২ অক্টোবর, ২০২৬

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

দ্বি-সাপ্তাহিক ক্রোম এবং ফায়ারফক্স রিলিজের এটি প্রথম মাস। এর মানে হলো, ক্রোম ১৫৩ , ক্রোম ১৫৪ , ফায়ারফক্স ১৫৫ , ফায়ারফক্স ১৫৬ , ফায়ারফক্স ১৫৭ এবং সাফারি ২৭ সেপ্টেম্বর ২০২৬-এর মধ্যে স্টেবল ভার্সনে রিলিজ করা হয়েছে। এই পোস্টে ব্রাউজারগুলোতে আসা নতুন ফিচারগুলো নিয়ে আলোচনা করা হয়েছে, যার মধ্যে বিপুল সংখ্যক ফিচার ‘বেসলাইন নিউলি অ্যাভেইলেবল’ হিসেবে যুক্ত হয়েছে।

progress() CSS ফাংশনটি বেসলাইন হয়ে যায়

ফায়ারফক্স ১৫৫-এ progress() CSS ম্যাথ ফাংশনের জন্য সমর্থন যোগ করা হয়েছে, ফলে এটি এখন নতুনভাবে উপলব্ধ।

progress() ফাংশনটি একটি <number> রিটার্ন করে, যা একটি শুরুর মান এবং একটি শেষের মানের মধ্যে একটি গণনার অবস্থানকে নির্দেশ করে। সাধারণত, এর ফলাফল 0 এবং 1 মধ্যে সীমাবদ্ধ থাকে, যা কন্টেইনার বা ভিউপোর্টের ডাইমেনশনের উপর ভিত্তি করে সাবলীল সাইজিং, অপাসিটি বা রঙ নিয়ন্ত্রণের জন্য এটিকে উপযোগী করে তোলে। Firefox 155 এবং Safari 27 উভয়ই no-clamp কীওয়ার্ড অপশনের জন্য সমর্থন যোগ করেছে, যা রিটার্ন করা progress ভ্যালুকে 0 নিচে বা 1 উপরে যাওয়ার সুযোগ দেয়।

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Browser Support

  • ক্রোম: ১৩৮।
  • প্রান্ত: ১৩৮।
  • ফায়ারফক্স: ১৫৫।
  • সাফারি: ২৬।

Source

alpha() দিয়ে আপেক্ষিক আলফা রঙগুলি বেসলাইন হয়ে যায়।

ফায়ারফক্স ১৫৫ এবং সাফারি ২৭ উভয়ই সিএসএস কালার ৫ থেকে alpha() রিলেটিভ কালার ফাংশনের জন্য সমর্থন যোগ করেছে।

alpha() ফাংশনটি একটি মূল রঙ গ্রহণ করে এবং সেই রঙের কালার চ্যানেল ও কালার স্পেস অপরিবর্তিত রেখে, তার আলফা (স্বচ্ছতা) চ্যানেল সমন্বয় করে সেই রঙটিই ফেরত দেয়:

.overlay {
  background-color: alpha(var(--brand-color) / 50%);
}

Chrome 151, Firefox 155 এবং Safari 27 সকলেই alpha() সমর্থন করায়, এই ফাংশনটি এখন নতুনভাবে বেসলাইন হিসেবে উপলব্ধ।

Browser Support

  • ক্রোম: ১৫১।
  • প্রান্ত: ১৫১।
  • ফায়ারফক্স: ১৫৫।
  • সাফারি: ২৭।

Source

revert-rule CSS কীওয়ার্ডটি Baseline হয়ে যায়

Safari 27-এ এখন CSS-জুড়ে revert-rule কীওয়ার্ডটির সমর্থন যোগ করা হয়েছে।

যেখানে revert ক্যাসকেডকে ইউজার বা ইউজার-এজেন্ট অরিজিনে ফিরিয়ে নিয়ে যায় এবং revert-layer পূর্ববর্তী কোনো ক্যাসকেড লেয়ারে ফিরিয়ে নিয়ে যায়, revert-rule কোনো প্রপার্টির ভ্যালুকে সেই অবস্থায় ফিরিয়ে আনে যা বর্তমান স্টাইল রুলটি উপস্থিত না থাকলে হতো। ক্রোম, ফায়ারফক্স এবং এখন সাফারি ২৭-এ সাপোর্টের সাথে, revert-rule এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: ১৪৮।
  • প্রান্ত: ১৪৮।
  • ফায়ারফক্স: ১৫০।
  • সাফারি: ২৭।

Source

<image> এর light-dark() ফাংশনের মানগুলো বেসলাইনে পরিণত হয়

Safari 27-এ light-dark() CSS ফাংশনের ভিতরে <image> ভ্যালু ব্যবহারের সুবিধা যোগ করা হয়েছে।

পূর্বে শুধুমাত্র <color> ভ্যালুর মধ্যে সীমাবদ্ধ থাকলেও, light-dark() এখন সক্রিয় লাইট বা ডার্ক color-scheme উপর ভিত্তি করে দুটি ইমেজের—যেমন url() ইমেজ বা CSS গ্রেডিয়েন্ট—মধ্যে পরিবর্তন করতে পারে। Chrome, Firefox, এবং Safari 27-এ সমর্থনের সাথে, light-dark() এ <image> ভ্যালু এখন নতুনভাবে বেসলাইন হিসেবে উপলব্ধ।

Browser Support

  • ক্রোম: ১৫০।
  • প্রান্ত: ১৫০।
  • ফায়ারফক্স: ১৫০।
  • সাফারি: ২৭।

overflow-anchor সহ স্ক্রোল অ্যাঙ্করিং বেসলাইন হয়ে যায়

সাফারি ২৭ স্ক্রল অ্যাঙ্করিং সক্ষম করেছে এবং overflow-anchor CSS প্রপার্টির জন্য সমর্থন যোগ করেছে।

যখন দৃশ্যমান ভিউপোর্টের উপরের DOM-এ কোনো পরিবর্তন ঘটে, তখন স্ক্রল অ্যাঙ্করিং স্বয়ংক্রিয়ভাবে স্ক্রলের অবস্থান ঠিক করে দেয়। অন্যথায়, ব্যবহারকারী যখন পৃষ্ঠাটি পড়ছেন বা এর সাথে ইন্টারঅ্যাক্ট করছেন, তখন কন্টেন্ট লাফিয়ে উঠতে পারে। নির্দিষ্ট এলিমেন্টগুলোকে অ্যাঙ্কর নোড হিসেবে কাজ করা থেকে বিরত রাখতে আপনি overflow-anchor: none ব্যবহার করতে পারেন। Chrome এবং Firefox-এর সাথে Safari 27 যুক্ত হওয়ায়, স্ক্রল অ্যাঙ্করিং এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: ৫৬।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ৬৬।
  • সাফারি: ২৭।

Source

font-width প্রপার্টি এবং @font-face ডেসক্রিপ্টর বেসলাইন হয়ে যায়।

CSS Fonts 4-এ নরমাল, কনডেন্সড বা এক্সপান্ডেড ফন্ট ফেস নির্বাচন করার জন্য font-stretch প্রমিত নাম হিসেবে প্রতিস্থাপন করে font-width ব্যবহার করা হয়েছে এবং font-stretch একটি লিগ্যাসি অ্যালিয়াস হিসেবে রাখা হয়েছে।

ফায়ারফক্স ১৫৫-এ font-width CSS প্রপার্টি, ` font-width @font-face ডেসক্রিপ্টর এবং CSSStyleDeclaration.fontWidth এর জন্য সমর্থন যোগ করা হয়েছে। ক্রোম ১৫৪-এও @font-face রুলগুলিতে font-width ডেসক্রিপ্টর এবং FontFace অবজেক্টে ` width প্রপার্টি যোগ করা হয়েছে। সাফারিতে বিদ্যমান সমর্থনের সাথে, font-width এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • Edge সমর্থিত নয়।
  • ফায়ারফক্স: ১৫৫।
  • সাফারি: ১৮.৪।

Source

লেজি-লোডেড ইমেজের জন্য sizes="auto" Baseline-এ পরিণত হয়।

Safari 27-এ loading="lazy" ব্যবহার করা ` <img> এলিমেন্টের sizes অ্যাট্রিবিউটে ` auto কীওয়ার্ড ব্যবহারের সুবিধা যোগ করা হয়েছে।

যখন আপনি sizes="auto" (অথবা auto দিয়ে শুরু হওয়া কোনো sizes তালিকা) নির্দিষ্ট করেন, তখন ব্রাউজার srcset থেকে সবচেয়ে উপযুক্ত ইমেজ সোর্সটি বেছে নেওয়ার জন্য লেজি-লোডেড ইমেজের রেন্ডার করা লেআউটের প্রস্থ ব্যবহার করে। Chrome, Firefox এবং এখন Safari 27-এ সমর্থিত হওয়ায়, sizes="auto" এখন নতুনভাবে বেসলাইন হিসেবে উপলব্ধ।

Browser Support

  • ক্রোম: ১২৬।
  • প্রান্ত: ১২৬।
  • ফায়ারফক্স: ১৫০।
  • সাফারি সমর্থিত নয়।

Source

অ্যাসিঙ্ক ইটারেশন এবং স্থানান্তরযোগ্য ReadableStream অবজেক্টগুলো বেসলাইন হয়ে যায়

Safari 27-এ ReadableStream এর বেশ কিছু আপডেট অন্তর্ভুক্ত করা হয়েছে:

  • for await...of লুপ এবং ReadableStream.prototype.values() ব্যবহার করে ReadableStream অবজেক্টের উপর অ্যাসিঙ্ক ইটারেশনের জন্য সমর্থন।
  • postMessage() ব্যবহার করে কনটেক্সটগুলোর মধ্যে ReadableStream অবজেক্ট স্থানান্তরের সুবিধা।
  • একটি ইটারেবল বা অ্যাসিঙ্ক ইটারেবল অবজেক্ট থেকে ReadableStream তৈরি করার জন্য ReadableStream.from() স্ট্যাটিক মেথডের সমর্থন (ফায়ারফক্সেও সমর্থিত)।

সাফারি ২৭-এ, অ্যাসিঙ্ক ইটারেবল স্ট্রিম এবং ট্রান্সফারেবল ReadableStream অবজেক্ট এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: ১২৪।
  • প্রান্ত: ১২৪।
  • ফায়ারফক্স: ১১০।
  • সাফারি: ২৭।

AnimationEvent.animation এবং TransitionEvent.animation বেসলাইন হয়ে যায়

Safari 27, AnimationEvent এবং TransitionEvent এ animation animation যোগ করে।

এই প্রপার্টিটি CSS অ্যানিমেশন বা ট্রানজিশন ইভেন্টের সাথে যুক্ত Animation অবজেক্টটি রিটার্ন করে, যার ফলে সরাসরি একটি ইভেন্ট লিসেনার থেকে অ্যানিমেশনটি পরিদর্শন বা নিয়ন্ত্রণ করা সহজ হয়। Chrome, Firefox, এবং Safari 27 এই প্রপার্টিটি সাপোর্ট করায়, এটি এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: ১৫১।
  • প্রান্ত: ১৫১।
  • ফায়ারফক্স: ১৫২।
  • সাফারি: ২৭।

Source

cookieStore.set() এর maxAge অপশনটি Baseline হয়ে যায়।

Safari 27-এ cookieStore.set() ব্যবহার করে কুকি সেট করার সময় maxAge অপশনের সাপোর্ট যুক্ত করা হয়েছে, যা আপনাকে একটি নির্দিষ্ট expires টাইমস্ট্যাম্প গণনা করার পরিবর্তে কুকির জীবনকাল সেকেন্ডে একটি সময়কাল হিসাবে নির্দিষ্ট করার সুযোগ দেয়। Chrome, Firefox এবং Safari 27-এ সাপোর্ট যুক্ত হওয়ায়, maxAge অপশনটি এখন নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: ১৪৫।
  • প্রান্ত: ১৪৫।
  • ফায়ারফক্স: ১৪৮।
  • সাফারি: ২৭।

সাফারি ২৭-এ কাস্টমাইজযোগ্য <select>

Chrome-এর পাশাপাশি Safari 27-এ appearance: base-select এবং <selectedcontent> এলিমেন্ট ব্যবহার করে কাস্টমাইজযোগ্য <select> মেনুর সাপোর্ট যুক্ত করা হয়েছে।

<select> এবং এর ::picker(select) সিউডো-এলিমেন্টকে appearance: base-select বেছে নিলে কন্ট্রোলটি একটি স্টাইলযোগ্য বেস অ্যাপিয়ারেন্সে পরিবর্তিত হয়, যা <option> এলিমেন্টের ভিতরে সমৃদ্ধ HTML কন্টেন্ট এবং বাটন ও ড্রপ-ডাউন পিকারের জন্য কাস্টম স্টাইলিংয়ের সুযোগ দেয়।

Browser Support

  • ক্রোম: ১৩৫।
  • প্রান্ত: ১৩৫।
  • ফায়ারফক্স: একটি ফ্ল্যাগের আড়ালে।
  • সাফারি: ২৭।

ক্রোমে ডিক্লারেটিভ <camera> এবং <microphone> এলিমেন্ট

ক্রোম ১৫৩ সংস্করণে <camera> এবং <microphone> এইচটিএমএল ক্যাপাবিলিটি এলিমেন্ট চালু করা হয়েছে।

<usermedia> এলিমেন্টের উপর ভিত্তি করে, <camera> এবং <microphone> এলিমেন্ট দুটি ব্যবহারকারী-সক্রিয় ডিক্লারেটিভ কন্ট্রোল প্রদান করে, যার মাধ্যমে পেজ লোড হওয়ার সময় স্ক্রিপ্ট-চালিত অনুমতি প্রম্পট চালু না করেই একক-ক্ষমতার ভিডিও বা অডিও ক্যাপচার অ্যাক্সেসের জন্য অনুরোধ করা যায়।

Browser Support

  • ক্রোম: ১৫৩।
  • প্রান্ত: ১৫৩।
  • ফায়ারফক্স সমর্থিত নয়।
  • সাফারি সমর্থিত নয়।

জাভাস্ক্রিপ্ট Iterator এবং Promise সংযোজন

Chrome 153-এ Iterator.prototype.join() এর পাশাপাশি Iterator.zip() এবং Iterator.zipKeyed() ব্যবহার করে যৌথ ইটারেশন যুক্ত করা হয়েছে।

Browser Support

  • ক্রোম: ১৫৩।
  • প্রান্ত: ১৫৩।
  • ফায়ারফক্স: ১৪৮।
  • সাফারি টেকনোলজি প্রিভিউ: সমর্থিত।

Source

ফায়ারফক্স ১৫৫-এ Promise.allKeyed() এবং Promise.allSettledKeyed() ইমপ্লিমেন্ট করা হয়েছে, যেগুলো প্রমিজের একটি ডিকশনারি অবজেক্ট গ্রহণ করে এবং একই কী-গুলোসহ একটি অবজেক্টে রিজলভ হয়।

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • Edge সমর্থিত নয়।
  • ফায়ারফক্স: ১৫৫।
  • সাফারি সমর্থিত নয়।

Source

ফায়ারফক্স ১৫৫-এ ওয়েবট্রান্সপোর্ট আপডেট

ফায়ারফক্স ১৫৫ তার WebTransport বাস্তবায়নকে সম্প্রসারিত করেছে:

  • WebTransport() কনস্ট্রাক্টরের protocols অপশন এবং WebTransport.protocol প্রপার্টির মাধ্যমে অ্যাপ্লিকেশন-স্তরের প্রোটোকল নেগোসিয়েশনের জন্য সমর্থন। Chrome, Safari এবং এখন Firefox 155-এ সমর্থিত হওয়ায়, WebTransport.protocol এখন নতুনভাবে বেসলাইন হিসেবে উপলব্ধ।
  • createSendGroup() , draining , exportKeyingMaterial() , এবং WebTransportDatagramDuplexStream.createWritable() এর জন্য সমর্থন।

Browser Support

  • ক্রোম: ১৪৩।
  • প্রান্ত: ১৪৩।
  • ফায়ারফক্স: ১৫৫।
  • সাফারি: ২৬.৪।

Source

সাফারি ২৭-এ সার্ভিস ওয়ার্কার স্ট্যাটিক রাউটিং এপিআই

Safari 27-এ InstallEvent.addRoutes() -এর মাধ্যমে Service Worker Static Routing API-এর জন্য সমর্থন যোগ করা হয়েছে।

এই এপিআইটি একটি সার্ভিস ওয়ার্কারকে ইনস্টলের সময় ডিক্লারেটিভ রাউটিং নিয়ম নিবন্ধন করার সুযোগ দেয়, যার ফলে ম্যাচিং রিকোয়েস্টগুলো সার্ভিস ওয়ার্কারের স্টার্টআপ এড়িয়ে সরাসরি নেটওয়ার্ক বা ক্যাশ থেকে ডেটা আনতে পারে এবং নেভিগেশন পারফরম্যান্স উন্নত হয়।

Browser Support

  • ক্রোম: ১২৩।
  • প্রান্ত: ১২৩।
  • ফায়ারফক্স সমর্থিত নয়।
  • সাফারি: ২৭।

Source

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

ব্রাউজারের বিটা সংস্করণগুলো আপনাকে ব্রাউজারের পরবর্তী স্থিতিশীল সংস্করণে কী কী থাকবে তার একটি পূর্বরূপ দেখায়। বিশ্বব্যাপী সেই সংস্করণটি প্রকাশের আগেই নতুন ফিচার পরীক্ষা করার বা এমন কিছু বাদ দেওয়ার জন্য এটি একটি দারুণ সময়, যা আপনার সাইটকে প্রভাবিত করতে পারে। এই মাসের নতুন বিটাগুলো হলো Chrome 155 , Chrome 156 , Firefox 158 এবং Safari 27.2 ।

ক্রোম ১৫৫ বিটা-তে CSS margin-trim , symbols() , এবং text-decoration-skip-spaces এর পাশাপাশি JPEG XL ( image/jxl ) ডিকোডিং সাপোর্ট, টেক্সট মডিউল ইম্পোর্ট ( import ... with { type: "text" } ) এবং ডিজিটাল ক্রেডেনশিয়ালস এপিআই ইস্যুয়েন্স সাপোর্ট অন্তর্ভুক্ত রয়েছে।

ক্রোম ১৫৬ বিটা-তে অন্তর্ভুক্ত রয়েছে CSS random() ফাংশন, CSS corner শর্টহ্যান্ড প্রোপার্টি, সিঙ্গেল-অ্যাক্সিস স্ক্রল কন্টেইনার, scroll-snap-type: pair , image-animation প্রোপার্টি এবং :animated-image সিউডো-ক্লাস, মিডিয়া এলিমেন্টের স্টেট সিউডো-ক্লাসসমূহ ( :playing , :paused , :seeking , :buffering , :stalled , :muted , :volume-locked ), ডিফার্ড মডিউল ইভ্যালুয়েশন ( import defer ), এবং HTML <install> এলিমেন্ট ও Web Install API।

Safari 27.2 beta-তে normal সাথে যুক্ত হলে safe এবং unsafe overflow alignment-এর জন্য সমর্থন যোগ করা হয়েছে, fixed-position boxes এবং ::picker(select) এলিমেন্টগুলিতে safe alignment সক্ষম করা হয়েছে, এবং display: grid-lanes জন্য flow-tolerance নাম পরিবর্তন করে fit-tolerance রাখা হয়েছে।