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

অক্টোবর ২০২৬-এ স্টেবল ও বিটা ওয়েব ব্রাউজারে লঞ্চ হওয়া কিছু আকর্ষণীয় ফিচার খুঁজে দেখুন।

Rachel Andrew

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

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

Chrome 155, Chrome 156, Firefox 158, Firefox 159, Safari 27.1, এবং Safari 27.2 অক্টোবর ২০২৬-এ স্টেবল ভার্সন হিসেবে রিলিজ করা হয়েছে। এই পোস্টে এই মাসে বিভিন্ন ব্রাউজার জুড়ে আসা নতুন ফিচারগুলি সম্পর্কে আলোচনা করা হয়েছে, যার মধ্যে বেশ কয়েকটি প্রধান ফিচার বেসলাইন নতুন উপলভ্য-তে পৌঁছেছে।

স্ক্রল-চালিত অ্যানিমেশন বেসলাইন হয়ে গেছে

Firefox 159 ডিফল্ট হিসেবে স্ক্রল-চালিত অ্যানিমেশন চালু করে।

স্ক্রল-চালিত অ্যানিমেশন আপনাকে CSS অ্যানিমেশন বা Web Animations API অ্যানিমেশনের প্রোগ্রেসকে স্ক্রল কন্টেনারের স্ক্রল অফসেটের সাথে লিঙ্ক করতে দেয়— scroll-timeline এবং scroll() ফাংশন ব্যবহার করে—অথবা স্ক্রলপোর্টের মধ্যে কোনও এলিমেন্টের দৃশ্যমানতার সাথে লিঙ্ক করতে দেয়— view-timeline এবং view() ফাংশন ব্যবহার করে, যা animation-timeline-এর সাথে অ্যাসাইন করা থাকে:

Chrome, Safari এবং এখন Firefox 159-এ কাজ করার সাথে, স্ক্রোল-চালিত অ্যানিমেশন বেসলাইন নতুন উপলভ্য।

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 159.
  • Safari: 26.

Source

স্ক্রল-চালিত অ্যানিমেশন: বেসলাইন নতুন উপলভ্য হওয়ার পথ দেখুন এবং ২০১৪ সালের প্রথম দিকে করা প্রস্তাব থেকে শুরু করে প্রতিটি কোর ব্রাউজার ইঞ্জিনে শিপ করা ইন্টারঅপারেবল ওয়েব স্ট্যান্ডার্ড পর্যন্ত স্ক্রল-চালিত অ্যানিমেশন কীভাবে বিবর্তিত হয়েছে তা এক্সপ্লোর করতে টাইমলাইন স্ক্রল করুন।

স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রি বেসলাইন হয়ে যায়

Firefox 159-এ স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রি-এর জন্য সহায়তা যোগ করা হয়েছে।

আগে, সমস্ত কাস্টম এলিমেন্টকে একটি গ্লোবাল window.customElements রেজিস্ট্রিতে রেজিস্টার করতে হত, যার ফলে বিভিন্ন লাইব্রেরি বা টিমের কম্পোনেন্ট একত্রিত করার সময় নামকরণে সমস্যা হতে পারত। আপনি এখন CustomElementRegistry() কনস্ট্রাক্টর ব্যবহার করে একটি স্বতন্ত্র CustomElementRegistry ইনস্ট্যান্স তৈরি করতে পারবেন এবং এর সংজ্ঞা একটি নির্দিষ্ট শ্যাডো ট্রিতে স্কোপ করতে পারবেন। customElementRegistry প্রপার্টি Document, Element এবং ShadowRoot-এও উপলভ্য।

Chrome, Safari ও Firefox 159 জুড়ে কাজ করার সুবিধা সহ, স্কোপ করা কাস্টম এলিমেন্ট রেজিস্ট্রি এখন বেসলাইন নতুন উপলভ্য।

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 159.
  • Safari: 26.

Source

JPEG XL ইমেজ সাপোর্ট

Chrome 155 এবং Firefox 158 উভয়ই ডিফল্ট হিসেবে JPEG XL (image/jxl) ছবির ফর্ম্যাটের জন্য সহায়তা চালু করে।

JPEG XL হল একটি রয়্যালটি-ফ্রি রাস্টার ইমেজ ফর্ম্যাট যা ISO/IEC 18181 হিসেবে স্ট্যান্ডার্ডাইজ করা হয়েছে। এটি লসি ও লসলেস কম্প্রেশন, প্রোগ্রেসিভ ডিকোডিং, ওয়াইড কালার গ্যামাট, হাই ডায়নামিক রেঞ্জ (HDR), হাই বিট ডেপথ, ট্রান্সপারেন্সি ও অ্যানিমেশন এবং আগে থেকে থাকা JPEG ফাইলের লসলেস ট্রান্সকোডিং সাপোর্ট করে। এছাড়াও, Firefox 158 ডিফল্ট HTTP Accept হেডার আপডেট করে যাতে ছবির অনুরোধের জন্য image/jxl অন্তর্ভুক্ত করা যায়।

Chrome-এ JPEG XL শিপিং করা থেকে আরও জানুন।

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 17.

Source

CSS টাইপ করা অ্যারিথমেটিক বেসলাইন হয়ে যায়

Firefox 158-এ CSS টাইপ করা অ্যারিথমেটিক ব্যবহার করার সুবিধা যোগ করা হয়েছে, যেমন calc()।

CSS টাইপ করা অ্যারিথমেটিক আপনাকে একই ডেটা টাইপের দুটি মান ভাগ করতে দেয়—এমনকি তারা বিভিন্ন ইউনিট ব্যবহার করলেও—একটি ইউনিটহীন <number> ভাগফল তৈরি করতে। আপনি সেই ইউনিটলেস ফলাফল সরাসরি এমন প্রপার্টিতে ব্যবহার করতে পারেন যা সংখ্যা গ্রহণ করে (যেমন opacity বা line-height) অথবা প্রকারের মধ্যে কনভার্ট করতে অন্য ইউনিট দিয়ে গুণ করতে পারেন:.

Chrome ও Safari-তে আগে থেকে থাকা সাপোর্টের সাথে Firefox 158 যোগ হওয়ার ফলে, CSS টাইপ করা অ্যারিথমেটিক এখন Baseline নতুন উপলভ্য।

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 158.
  • Safari: 26.

PerformanceResourceTiming.deliveryType

Firefox 158-এ PerformanceResourceTiming.deliveryType প্রপার্টির জন্য সহায়তা যোগ করা হয়েছে।

এই প্রপার্টি থেকে বোঝা যায় যে কীভাবে কোনও রিসোর্স ডেলিভার করা হয়েছে—যেমন, ক্যাশে থেকে কোনও রিসোর্স পরিবেশন করা হলে "cache" রিটার্ন করা।

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 158.
  • Safari: 26.4.

Source

random() CSS ফাংশন

Chrome 156-এ random() CSS ফাংশনের জন্য সহায়তা যোগ করা হয়েছে।

random() ফাংশনটি একটি নির্দিষ্ট ন্যূনতম এবং সর্বাধিক রেঞ্জের মধ্যে একটি র‍্যান্ডম সংখ্যাসূচক মান তৈরি করে, যার মধ্যে একটি ঐচ্ছিক স্টেপ ইন্টারভাল থাকে। ডিফল্ট হিসেবে, প্রতিটি random() কল একটি স্বতন্ত্র র‍্যান্ডম ভ্যালুতে সমাধান করে অথবা আপনি প্রপার্টি বা এলিমেন্ট জুড়ে একটি র‍্যান্ডম ভ্যালু শেয়ার করতে প্রথম আর্গুমেন্ট হিসেবে একটি <random-key> পাস করতে পারেন:

Smashing Magazine-এ CSS random() ফাংশনের মাধ্যমে খেলার ছলে অসম্পূর্ণতাকে আলিঙ্গন করা নিবন্ধে উদাহরণ দেখুন।

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox Technology Preview: supported.
  • Safari: 26.2.

Source

margin-trim CSS প্রপার্টি

Chrome 155-এ ব্লক কন্টেনার এবং মাল্টি-কলাম কন্টেনারে margin-trim CSS প্রপার্টির জন্য সহায়তা যোগ করা হয়েছে।

আপনি কোনও কন্টেনারে margin-trim ব্যবহার করে তার চাইল্ড এলিমেন্টের মার্জিন বাদ দিতে পারেন যেখানে তারা কন্টেনারের প্রান্তের সাথে মিলিত হয়, :first-child বা :last-child ওভাররাইডের প্রয়োজন ছাড়াই প্রথম চাইল্ডের আগে বা শেষ চাইল্ডের পরে অতিরিক্ত স্পেসিং এড়িয়ে যায়।

margin-trim প্রপার্টি ব্যবহার করে শুরু ও শেষের মার্জিন সরিয়ে দিন নিবন্ধ থেকে আরও জানুন।

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: not supported.
  • Safari: 16.4.

Source

symbols() CSS ফাংশন সহ ইনলাইন কাউন্টার স্টাইল

Chrome 155-এ symbols() CSS ফাংশনের জন্য সহায়তা চালু করা হয়েছে।

symbols() ফাংশন আপনাকে সরাসরি list-style-type, list-style শর্টহ্যান্ড, counter() বা counters()-এর মধ্যে একটি বেনামী কাউন্টার স্টাইল সংজ্ঞায়িত করতে দেয়, আলাদা নামযুক্ত @counter-style অ্যাট-রুল ঘোষণা না করেই।

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 35.
  • Safari Technology Preview: supported.

Source

text-decoration-skip-spaces CSS প্রপার্টি

Chrome 155-এ text-decoration-skip-spaces CSS প্রপার্টি যোগ করা হয়েছে, যা টেক্সট ডেকোরেশন লাইন—যেমন আন্ডারলাইন, ওভারলাইন এবং লাইন-থ্রু—হোয়াইটস্পেস অক্ষর এড়িয়ে যাবে কিনা তা নিয়ন্ত্রণ করে। এটি আপনাকে লিডিং, ট্রেলিং বা ইন্টার-ওয়ার্ড স্পেসের নিচে সাজসজ্জা আঁকা থেকে বিরত রাখতে দেয়।

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: not supported.

:navigation-source CSS সিউডো-ক্লাস

Chrome 156-এ :navigation-source CSS সিউডো-ক্লাস চালু করা হয়েছে। এটি সেই লিঙ্ক, বোতাম বা ফর্ম এলিমেন্টের সাথে মিলে যায় যা নেভিগেশন শুরু করেছে এবং নেভিগেশন চলাকালীন সেই এলিমেন্ট বেছে রাখে।

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox: not supported.
  • Safari: not supported.

জাভাস্ক্রিপ্ট টেক্সট মডিউল ইমপোর্ট করা এবং লোড না হওয়া মডিউল আবার লোড করার চেষ্টা করা

Chrome 155, import ... with { type: "text" } ব্যবহার করে টেক্সট মডিউল ইমপোর্ট করার জন্য সহায়তা যোগ করে, Firefox-এ যোগ দেয়। type: "text" ইমপোর্ট অ্যাট্রিবিউট টার্গেট মডিউলের কন্টেন্ট জাভাস্ক্রিপ্ট স্ট্রিং হিসেবে লোড করে।

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 153.
  • Safari: not supported.

Source

Chrome 156-এ মডিউল লোড করার আচরণও আপডেট করা হয়েছে, যাতে লোড না হওয়া মডিউল আর স্থায়ীভাবে ক্যাশে করা না হয়। অ্যাপ্লিকেশন এখন ব্যর্থ মডিউল লোড আবার চেষ্টা করতে পারে—যেমন, সাময়িক নেটওয়ার্ক ব্যর্থতার পরে আবার import() কল করে।

Chrome ও Firefox-এ WebTransport আপডেট

Firefox 158 এবং Chrome 156 দুটিই প্রসারিত হয় WebTransport:

Firefox 158-এ কানেকশন ও ডেটাগ্রাম পরিসংখ্যান ফিরিয়ে আনার জন্য WebTransport.getStats() পদ্ধতি এবং স্ট্যাটিক WebTransport.supportsReliableOnly প্রপার্টি যোগ করা হয়েছে যা দেখায় যে ব্রাউজারটি এক্সক্লুসিভভাবে নির্ভরযোগ্য ট্রান্সপোর্টের মাধ্যমে WebTransport সেশন সাপোর্ট করে কিনা।

Browser Support

  • Chrome: 157.
  • Edge: 157.
  • Firefox: 158.
  • Safari: 26.4.

Source

Chrome 156, প্রাথমিক CONNECT হ্যান্ডশেক চলাকালীন WebTransportOptions-এ কাস্টম HTTP অনুরোধ হেডার পাস করার এবং WebTransport ইনস্ট্যান্স থেকে সার্ভার রেসপন্স হেডার পড়ার সুবিধা যোগ করে।

Firefox-এ Notification navigate বিকল্প

Firefox 158, Safari-র সাথে যোগ দিয়ে, Notification() কনস্ট্রাক্টর ও ServiceWorkerRegistration.showNotification()-এ navigate বিকল্পের জন্য এবং Notification.navigate প্রপার্টির জন্য সহায়তা যোগ করে। ব্যবহারকারী সিস্টেম বিজ্ঞপ্তিতে ক্লিক করলে ব্রাউজারকে নেভিগেট করার জন্য এই বিকল্পটি একটি URL নির্দিষ্ট করে।

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 18.5.

Source

Firefox-এ HTML স্যানিটাইজার API আপডেট

Firefox 158-এ javascriptURLs কনফিগারেশন বিকল্প এবং Sanitizer.setJavascriptURLs() যোগ করা হয়েছে HTML Sanitizer API-তে, যা নিয়ন্ত্রণ করে যে javascript: URL সহ অ্যাট্রিবিউট সরানো হবে কিনা যখন Element.setHTMLUnsafe()-এর মতো অসুরক্ষিত HTML ইনসার্ট করার পদ্ধতি ব্যবহার করা হয়।

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: not supported.

এছাড়াও, Firefox 159 Element.setHTML()-এর মতো নিরাপদ স্যানিটাইজার পদ্ধতি আপডেট করে, যাতে DOM ট্রি তৈরি করার পরে নয়, বরং পার্স করার সময় অবাঞ্ছিত এলিমেন্ট ও অ্যাট্রিবিউট বাদ দেওয়া যায় এবং আশেপাশের টেক্সট যাতে একটি টেক্সট নোডে থাকে তা নিশ্চিত করা যায়।

Safari-তে flow-tolerance-এর নাম পরিবর্তন করে fit-tolerance করা হচ্ছে

Safari 27.2 গ্রিড লেন লেআউট (display: grid-lanes)-এর জন্য flow-tolerance প্রপার্টির নাম পরিবর্তন করে fit-tolerance করে, flow-tolerance-কে একটি বন্ধ হয়ে যাওয়া উপনাম হিসেবে রেখে দেয়।

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.4.

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

ব্রাউজারের বিটা ভার্সন আপনাকে ব্রাউজারের পরবর্তী স্টেবল ভার্সনে কী কী থাকবে তার প্রিভিউ দেয়। নতুন ফিচার বা সরিয়ে দেওয়া ফিচার পরীক্ষা করার এটি একটি দুর্দান্ত সময়, যা আপনার সাইটকে প্রভাবিত করতে পারে, তবে তা সর্বজনীনভাবে রিলিজ হওয়ার আগেই। এই মাসে নতুন বিটা হল Chrome 157, Chrome 158 এবং Firefox 160।

Chrome 157 বিটাতে CSS corner শর্টহ্যান্ড এবং এজ সাব-শর্টহ্যান্ড অন্তর্ভুক্ত রয়েছে যা border-radius এবং corner-shape একসাথে, text-decoration-inset, text-overflow: <string> এবং position-visibility: anchor-valid এবং anchor-visible সেট করে। এছাড়াও, এতে HTML-ইন-ক্যানভাস রেন্ডারিং সাপোর্ট এবং <camera>, <microphone> ও <geolocation> ক্ষমতা এলিমেন্টের জন্য শুধুমাত্র-আইকন displaymode অ্যাট্রিবিউট অন্তর্ভুক্ত আছে।

Chrome 158 বিটা ভার্সনে ডিক্লারেটিভ HTML <install> এলিমেন্ট এবং ক্রস-অরিজিন ওয়েব অ্যাপ ইনস্টলেশনের জন্য Web Install API (navigator.install()) নিয়ে আসা হয়েছে। CSS এবং SVG-তে যোগ করা বিষয়ের মধ্যে রয়েছে ::highlight(*) ইউনিভার্সাল কাস্টম হাইলাইট সিলেক্টর, মিডিয়া এলিমেন্ট স্টেট সিউডো-ক্লাস (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), flow-start এবং flow-end অ্যালাইনমেন্ট কীওয়ার্ড এবং circle() ও ellipse() বেসিক শেপের জন্য closest-corner ও farthest-corner রেডিয়াস।

Firefox 160 বিটা, WebExtensions runtime.PlatformInfo API আপডেট করে যাতে ARM64 প্ল্যাটফর্মে aarch64-এর পরিবর্তে arch-কে arm64 হিসেবে ফিরিয়ে আনা যায়, যা Chrome-এর সাথে সামঞ্জস্যপূর্ণ।