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

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

Rachel Andrew

প্রকাশিত: ২৯ মে, ২০২৬

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

মে মাসে Chrome 148 , Firefox 151 এবং Safari 26.5- এর স্থিতিশীল সংস্করণ প্রকাশিত হয়েছে। এই পোস্টে এই মাসের বিভিন্ন নতুন বৈশিষ্ট্যগুলো তুলে ধরা হয়েছে।

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

:open CSS সিউডো-ক্লাসটি বেসলাইন হয়ে যায়

সাফারি ২৬.৫ মূলত বিদ্যমান ফিচারগুলোর ত্রুটি সংশোধনের একটি রিলিজ। তবে, এতে :open সিউডো-ক্লাসের জন্য সমর্থনও অন্তর্ভুক্ত করা হয়েছে, যার ফলে এই ফিচারটি নতুনভাবে উপলব্ধ হয়েছে।

:open সিউডো-ক্লাসটি আপনাকে এমন এলিমেন্টগুলোকে স্টাইল করতে দেয়, যেগুলোর খোলা অবস্থায় "open" এবং "closed" স্টেট থাকে। এটি <details> এবং <dialog> এর মতো এলিমেন্টগুলোর খোলা অবস্থার ক্ষেত্রে, এবং <select> ও <input> এলিমেন্টগুলোর (যেমন কালার বা ডেট পিকার) পিকার ইন্টারফেস প্রদর্শিত হওয়ার সময় প্রযোজ্য। এটি details[open] এর মতো অ্যাট্রিবিউট ব্যবহার করে স্টাইল করার একটি পরিচ্ছন্ন ও অর্থপূর্ণ বিকল্প প্রদান করে।

Browser Support

• 133
• 133
• 136
• 26.5

Source

CSS শুধুমাত্র-নাম কন্টেইনার কোয়েরিগুলি বেসলাইন হয়ে যায়

এই মাসে Chrome 148 প্রকাশের সাথে সাথে, শুধুমাত্র নাম-ভিত্তিক কন্টেইনার কোয়েরি এখন Baseline Newly হিসেবে উপলব্ধ হয়েছে।

পূর্বে, একটি কন্টেইনার কোয়েরি লেখার সময়, কন্টেইনারের নামের পাশাপাশি একটি সাইজ বা স্টাইল কোয়েরি কন্ডিশন উল্লেখ করতে হতো এবং container-type প্রপার্টির মাধ্যমে কন্টেইনারটির টাইপ নির্ধারণ করতে হতো। এখন, আপনি কোনো অতিরিক্ত শর্ত ছাড়াই শুধুমাত্র নাম দিয়ে একটি নির্দিষ্ট কন্টেইনারের উপস্থিতি কোয়েরি করতে পারবেন। এছাড়াও, আপনি যদি শুধু নাম দিয়ে কোয়েরি করেন, তাহলে অ্যানসেস্টরে আর ` container-type সেট করার প্রয়োজন নেই।

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

• 148
• 148
• 149
• 26.4

কাস্টম প্রপার্টিগুলির জন্য কন্টেইনার স্টাইলের কোয়েরিগুলি বেসলাইন হয়ে যায়।

ফায়ারফক্স ১৫১-এ @container উপর style() কোয়েরির সমর্থন চালু করা হয়েছে, যার ফলে কাস্টম প্রোপার্টির জন্য কন্টেইনার স্টাইল কোয়েরি এখন নতুনভাবে উপলব্ধ।

কন্টেইনার স্টাইল কোয়েরি আপনাকে একটি প্যারেন্ট কন্টেইনারের CSS প্রোপার্টির উপর ভিত্তি করে এলিমেন্টগুলিতে স্টাইল প্রয়োগ করার সুযোগ দেয়। সাইজ কোয়েরি অত্যন্ত শক্তিশালী হলেও, স্টাইল কোয়েরি আপনাকে সাইজ-বহির্ভূত ফিচারগুলো কোয়েরি করতে সক্ষম করে। বিশেষ করে, এই রিলিজে কাস্টম প্রোপার্টি কোয়েরি করার জন্য সম্পূর্ণ ক্রস-ব্রাউজার সাপোর্ট আনা হয়েছে। উদাহরণস্বরূপ, আপনি পরীক্ষা করে দেখতে পারেন যে একটি প্যারেন্ট কন্টেইনারে কাস্টম প্রোপার্টি --theme dark এ সেট করা আছে কি না:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

• 111
• 111
• 151
• 18

ভিডিও এবং অডিও উপাদানগুলির জন্য লেজি লোডিং

ক্রোম ১৪৮-এ loading="lazy" অ্যাট্রিবিউটের মাধ্যমে <video> এবং <audio> ` এলিমেন্টের জন্য নেটিভ লেজি লোডিং চালু করা হয়েছে।

<img> এবং <iframe> এলিমেন্টের মতোই, এখন আপনি ব্রাউজারকে নির্দেশ দিতে পারেন যেন মিডিয়া রিসোর্সগুলো ভিউপোর্টের কাছাকাছি না আসা পর্যন্ত সেগুলোর লোডিং বিলম্বিত করা হয়। এটি পেজ লোডের পারফরম্যান্স উন্নত করতে, ব্যান্ডউইথ বাঁচাতে এবং আপনার ব্যবহারকারীদের জন্য ডেটা ব্যবহার কমাতে সাহায্য করে। এই ফিচারটি বাস্তবায়নকারী টিমের কাছ থেকে আরও জানুন “আজই ওয়েবে কীভাবে স্ট্যান্ডার্ড এইচটিএমএল ভিডিও এবং অডিও লেজি-লোডিং ব্যবহার করবেন” (How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today) নিবন্ধে।

Browser Support

• 148
• 148
• x
• x

Source

ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই

ফায়ারফক্স ১৫১ ডেস্কটপ প্ল্যাটফর্মগুলিতে ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই-এর জন্য সমর্থন চালু করেছে।

স্ট্যান্ডার্ড পিকচার-ইন-পিকচার এপিআই আপনাকে একটি <video> এলিমেন্টকে একটি অলওয়েজ-অন-টপ উইন্ডোতে দেখার সুযোগ দেয়, কিন্তু ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই আপনাকে যেকোনো এইচটিএমএল কন্টেন্ট সম্বলিত একটি অলওয়েজ-অন-টপ উইন্ডো খোলার সুযোগ দেয়। এর ফলে ভিডিও কনফারেন্স অংশগ্রহণকারীদের গ্রিড, ইন্টারেক্টিভ স্টক টিকার বা টাইমারের মতো সমৃদ্ধ ইন্টারেক্টিভ ওভারলে ব্যবহার করা যায়, যা পেজ থেকে অন্য কোথাও চলে গেলেও থেকে যায়।

Browser Support

• 116
• 116
• 151
• x

Source

ওয়েব সিরিয়াল এপিআই প্ল্যাটফর্ম সমর্থন প্রসারিত করে

ফায়ারফক্স ১৫১ ডেস্কটপ প্ল্যাটফর্মে ওয়েব সিরিয়াল এপিআই- এর সমর্থন যোগ করেছে এবং ক্রোম ১৪৮ অ্যান্ড্রয়েডে এর সমর্থন যোগ করেছে।

ওয়েব সিরিয়াল এপিআই ওয়েবসাইটগুলোকে সিরিয়াল ডিভাইস, যেমন—মাইক্রোকন্ট্রোলার, থ্রিডি প্রিন্টার, ডেভেলপমেন্ট বোর্ড এবং পেরিফেরাল হার্ডওয়্যার থেকে ডেটা পড়া ও লেখার একটি উপায় প্রদান করে। ফায়ারফক্সে ওয়েব সিরিয়াল এপিআই ব্যবহার করার জন্য ব্যবহারকারীদের একটি কৃত্রিমভাবে তৈরি সাইট পারমিশন অ্যাড-অন ইনস্টল করতে হয়, যা অ্যাক্সেস ব্যবস্থাপনার জন্য একটি নিরাপদ ও নিয়ন্ত্রিত ব্যবস্থা নিশ্চিত করে।

Browser Support

• 89
• 89
• 151
• x

Source

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

ব্রাউজারের বিটা সংস্করণগুলো আপনাকে ব্রাউজারের পরবর্তী স্থিতিশীল সংস্করণের ফিচারগুলোর একটি পূর্বরূপ দেখায়। বিশ্বব্যাপী সেই সংস্করণটি প্রকাশিত হওয়ার আগেই নতুন ফিচার পরীক্ষা করার বা এমন কিছু বাদ দেওয়ার জন্য এটি একটি দারুণ সময়, যা আপনার সাইটকে প্রভাবিত করতে পারে। এই মাসের নতুন বিটাগুলো হলো ক্রোম ১৪৯ এবং ফায়ারফক্স ১৫২। এই মাসে সাফারির কোনো বিটা নেই।

ক্রোম ১৪৯ বিটা-তে কিছু আকর্ষণীয় CSS আপডেট রয়েছে, যেমন CSS গ্যাপ ডেকোরেশন, যা আপনাকে ফ্লেক্স এবং গ্রিড আইটেমগুলোর মাঝের ফাঁকা স্থান (হোয়াইটস্পেস) স্টাইল করার সুযোগ দেয়। এটি path() এবং shape() ফাংশনের পাশাপাশি shape-outside প্রপার্টিতে rect() এবং xywh() এর মতো বেসিক শেপ ফাংশন এবং path-length একটি CSS প্রপার্টি হিসেবেও সাপোর্ট করে। API-এর ক্ষেত্রে, scrollTo() , scrollBy() , এবং scrollIntoView() এর মতো প্রোগ্রাম্যাটিক স্ক্রল মেথডগুলো এখন `Promises` রিটার্ন করে, যা স্মুথ স্ক্রলিং সম্পন্ন হলে রিজলভ হয়। এছাড়াও, যেসব পেজে সক্রিয় WebSocket কানেকশন রয়েছে, সেগুলো এখন ব্যাক/ফরোয়ার্ড ক্যাশিং (BFCache)-এর জন্য যোগ্য হতে পারবে।

ফায়ারফক্স ১৫২ বিটা-তে field-sizing প্রপার্টির সম্পূর্ণ সমর্থন যুক্ত করা হয়েছে, যা ফর্ম কন্ট্রোলগুলোকে তাদের বিষয়বস্তুর সাথে মানানসই করে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করতে দেয়। এছাড়াও এটি Notification ইন্টারফেসে actions এবং maxActions প্রপার্টি এবং Element.getAnimations() -এ options.pseudoElement সমর্থন যোগ করে।