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

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

Rachel Andrew

প্রকাশিত: ৩০ জুন, ২০২৬

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

জুন মাসে Chrome 149 , Chrome 150 এবং Firefox 152 স্থিতিশীল সংস্করণ হিসেবে প্রকাশিত হয়েছে। এই মাসে Safari-এর কোনো স্থিতিশীল সংস্করণ প্রকাশিত হয়নি। এই পোস্টে ওয়েব ব্রাউজারগুলোতে আসা নতুন ফিচারগুলো নিয়ে আলোচনা করা হয়েছে।

field-sizing সহ ফর্ম কন্ট্রোলের আকার নির্ধারণ বেসলাইন হয়ে যায়।

ফায়ারফক্স ১৫২-এ field-sizing ’ CSS প্রপার্টির জন্য সমর্থন যুক্ত করা হয়েছে, যার ফলে এখন থেকে সকল প্রধান ব্রাউজার ইঞ্জিনে স্বয়ংক্রিয়ভাবে ফর্ম কন্ট্রোলের আকার পরিবর্তন করার সুবিধা পাওয়া যাবে।

` field-sizing প্রপার্টিটি <textarea> `, <input> , এবং <select> এর মতো ফর্ম কন্ট্রোলগুলোকে একটি ডিফল্ট আকারে ( field-sizing: content field-sizing: fixed content) হতে দেয়। এর ফলে, ব্যবহারকারীর টাইপ করার সাথে সাথে আকার পরিবর্তনকারী টেক্সট ইনপুট বা টেক্সটএরিয়া তৈরি করার সময় জাভাস্ক্রিপ্টের বিকল্প পদ্ধতির প্রয়োজন হয় না।

textarea {
  field-sizing: content;
}

shape-outside এর rect() এবং xywh() মৌলিক আকারগুলো Baseline-এ পরিণত হয়।

ক্রোম ১৪৯ সংস্করণে shape-outside প্রপার্টিতে rect() এবং xywh() শেপ ফাংশনগুলোর সাপোর্ট যুক্ত হওয়ায়, এই মৌলিক শেপগুলো এখন প্রধান প্রধান ব্রাউজার জুড়ে নতুনভাবে উপলব্ধ।

rect() এবং xywh() ফাংশনগুলো আপনাকে সঠিক ইনসেট স্থানাঙ্ক অথবা অরিজিন-ও-ডাইমেনশন সিনট্যাক্স ব্যবহার করে আয়তাকার ফ্লোট বর্জন এলাকা নির্ধারণ করতে দেয়। আয়তাকার ফ্লোট র‍্যাপিং শেপের জন্য polygon() ব্যবহারের চেয়ে এটি একটি সহজ এবং অধিক পাঠযোগ্য সিনট্যাক্স প্রদান করে।

CSS text-fit এর সাহায্যে স্বয়ংক্রিয় ফন্ট স্কেলিং

ক্রোম ১৫০ সংস্করণে text-fit CSS প্রপার্টিটি চালু করা হয়েছে, যা ডেভেলপারদেরকে কোনো কন্টেইনিং বক্সের প্রস্থ অনুযায়ী ফন্টের আকার স্বয়ংক্রিয়ভাবে পরিবর্তন করার সুযোগ দেয়।

.headline {
  text-fit: grow;
}

CSS গ্যাপ ডেকোরেশন

ক্রোম ১৪৯-এ গ্রিড এবং ফ্লেক্সবক্স লেআউটে সিএসএস গ্যাপ ডেকোরেশনের সাপোর্ট চালু করা হয়েছে। গ্যাপ ডেকোরেশন আপনাকে গ্রিড এবং ফ্লেক্স আইটেমগুলোর মাঝের ফাঁকা জায়গায় সরাসরি লাইন ও স্টাইলিং যোগ করার সুযোগ দেয়, যা মাল্টি-কলাম লেআউটের column-rule মতোই কাজ করে।

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

গ্যাপ ডেকোরেশন সম্পর্কে আরও জানুন: এখন ক্রোমিয়ামে ।

CSS background-clip: border-area

ক্রোম ১৫০-এ সিএসএস ব্যাকগ্রাউন্ডস লেভেল ৪ থেকে background-clip: border-area এর জন্য সমর্থন যোগ করা হয়েছে।

এই মানটি এলিমেন্টের ব্যাকগ্রাউন্ডকে বিশেষভাবে বর্ডার এলাকায় সীমাবদ্ধ করে, যার ফলে আপনি অতিরিক্ত র‍্যাপিং এলিমেন্ট বা সিউডো-এলিমেন্টের প্রয়োজন ছাড়াই কাস্টম গ্রেডিয়েন্ট বর্ডার, আলংকারিক ফ্রেমের কিনারা এবং অ্যানিমেটেড বর্ডার ইফেক্ট তৈরি করতে পারেন।

প্রোগ্রাম্যাটিক স্ক্রোল প্রতিশ্রুতি

ক্রোম ১৫০ প্রোগ্রাম্যাটিক স্ক্রল মেথডগুলোকে ( scrollTo() , scrollBy() , এবং scrollIntoView() ) একটি Promise রিটার্ন করার জন্য আপডেট করেছে।

স্মুথ স্ক্রলিং অ্যানিমেশন শেষ হলে রিটার্ন করা প্রমিসটি রিজলভ হয়, যা স্ক্রলিং স্থির হয়ে গেলে পরবর্তী অ্যাকশনগুলো ট্রিগার করার জন্য একটি নির্ভরযোগ্য সংকেত প্রদান করে।

focusgroup সহ ঘোষণামূলক কীবোর্ড নেভিগেশন

ক্রোম ১৫০-এ focusgroup অ্যাট্রিবিউটের জন্য সমর্থন যুক্ত করা হয়েছে।

focusgroup অ্যাট্রিবিউটটি ডেভেলপারদের ম্যানুয়ালি কীবোর্ড ইভেন্ট লিসেনার না লিখেই, টুলবার, ট্যাব লিস্ট এবং মেনুর মতো কম্পোজিট UI কন্ট্রোলগুলোর মধ্যে ডিক্লারেটিভভাবে অ্যারো কী নেভিগেশন পরিচালনা করতে দেয়।

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

ফোকাসগ্রুপ এক্সপ্লেনার থেকে আরও জানুন।

ব্যাক/ফরোয়ার্ড ক্যাশে (bfcache)-এ ওয়েবসকেটস সমর্থিত

ক্রোম ১৪৯-এ, সক্রিয় ওয়েবসকেট সংযোগযুক্ত পেজগুলো এখন ব্যাক/ফরোয়ার্ড ক্যাশে (bfcache) প্রবেশ করতে পারবে।

পূর্বে, একটি খোলা ওয়েবসকেট সংযোগ থাকলে পৃষ্ঠাটি বিএফক্যাশের জন্য অযোগ্য হয়ে যেত। এখন, বিএফক্যাশে প্রবেশের সাথে সাথে ব্রাউজার স্বয়ংক্রিয়ভাবে সক্রিয় ওয়েবসকেট সংযোগগুলি বন্ধ করে দেয়, ফলে পৃষ্ঠাটি ক্যাশড হয় এবং পুনরায় সেখানে ফিরে গেলে তা সঙ্গে সঙ্গে পুনরুদ্ধার হয়ে যায়।

রিসোর্স টাইমিং-এ অন্তর্বর্তী এবং হেডার প্রতিক্রিয়ার সময়

ফায়ারফক্স ১৫২-এ PerformanceResourceTiming ইন্টারফেসে firstInterimResponseStart এবং finalResponseHeadersStart এর জন্য সমর্থন যোগ করা হয়েছে।

একটি অনুরোধ পাঠানোর পর ব্রাউজারের অন্তর্বর্তীকালীন HTTP প্রতিক্রিয়া এবং চূড়ান্ত HTTP প্রতিক্রিয়া পেতে যথাক্রমে কতক্ষণ সময় লাগে, তা পরিমাপ করতে এগুলো ব্যবহার করা যেতে পারে।

নোটিফিকেশনের জন্য অ্যাকশন বাটন

ফায়ারফক্স ১৫২-এ Notification এর actions প্রপার্টি এবং ServiceWorkerRegistration.showNotification() এর options ব্যবহার করে নোটিফিকেশন অ্যাকশন বাটনের জন্য সমর্থন যোগ করা হয়েছে।

এখন আপনি ওএস নোটিফিকেশনে অ্যাকশন বাটন যুক্ত করতে পারবেন এবং বাটন ট্যাপ করা হলে ব্যবহারকারীর কার্যকলাপ পর্যবেক্ষণ করতে পারবেন।

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

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

ফায়ারফক্স ১৫৩ বিটা-তে সর্বোচ্চ ক্যাপচার করা স্ট্যাক ট্রেস গভীরতা কনফিগার করার জন্য Error.stackTraceLimit , ইনডেক্স করা রেকর্ড পুনরুদ্ধারের জন্য IDBObjectStore.getAllRecords() ও IDBIndex.getAllRecords() , এবং WebRTC নিরাপত্তা পরিদর্শনের জন্য RTCDtlsTransport.getRemoteCertificates() এর সাপোর্ট যুক্ত করা হয়েছে। এছাড়াও অ্যাড-অন ডেভেলপাররা অন-ডিমান্ড স্ক্রিপ্ট ইনজেকশনের জন্য একটি নতুন publicSuffix API এবং userScripts.execute() মেথড পাচ্ছেন।

সাফারি ২৭ বিটা-তে নতুন সংযোজন করা হয়েছে ট্রান্সফর্ম-অ্যাওয়ার অ্যাঙ্কর পজিশনিং, হেডিং এলিমেন্ট মেলানোর জন্য :heading সিউডো-ক্লাস, ক্যাসকেড লেয়ার রোল ব্যাক করার জন্য revert-rule কীওয়ার্ড, বক্স সাইজিং-এ stretch কীওয়ার্ডের সাপোর্ট এবং :host:has() কম্পাউন্ড সিলেক্টর।