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

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

Rachel Andrew

প্রকাশিত: ২৮ আগস্ট, ২০২৬

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

২০২৬ সালের আগস্ট মাসে ক্রোম ১৫২ এবং ফায়ারফক্স ১৫৪ স্টেবল সংস্করণ হিসেবে প্রকাশিত হয়েছে। এই মাসে সাফারির কোনো নতুন স্টেবল সংস্করণ প্রকাশিত হয়নি। এই পোস্টে ওয়েব প্ল্যাটফর্ম জুড়ে আসা নতুন ফিচারগুলো নিয়ে আলোচনা করা হয়েছে। নতুন ফিচারগুলো বেসলাইন হিসেবে উপলব্ধ হওয়ার দিক থেকে এটি একটি চমৎকার মাস ছিল।

text-box প্রোপার্টিগুলো বেসলাইন হয়ে যায়।

ফায়ারফক্স ১৫৪-এ text-box-trim , text-box-edge এবং text-box শর্টহ্যান্ড প্রপার্টির জন্য সমর্থন যুক্ত করা হয়েছে।

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

text-box-edge প্রপার্টিটি নির্দিষ্ট করে দেয় যে কোন ফন্ট মেট্রিক্স অনুযায়ী ট্রিম করা হবে (যেমন cap alphabetic বা ex alphabetic ), এবং text-box-trim নির্দিষ্ট করে দেয় যে ওভার এজ, আন্ডার এজ, নাকি উভয়ই ট্রিম করা হবে। ` text-box শর্টহ্যান্ডটি এই দুটি প্রপার্টিকে একত্রিত করে।

Safari 18.2, Chrome 133 এবং এখন Firefox 154-এ সমর্থনের ফলে, text-box প্রোপার্টিগুলো এখন নতুনভাবে বেসলাইন হিসেবে উপলব্ধ।

sibling-count() এবং sibling-index() CSS ফাংশনগুলো বেসলাইন হয়ে যায়।

ফায়ারফক্স ১৫৪-এ sibling-count() এবং sibling-index() CSS ফাংশনগুলোর জন্য সমর্থন যোগ করা হয়েছে।

sibling-count() ফাংশনটি একটি পূর্ণসংখ্যা রিটার্ন করে, যা প্যারেন্ট কন্টেইনারে থাকা মোট সিibling DOM এলিমেন্টের সংখ্যা নির্দেশ করে (এলিমেন্টটি নিজে সহ)। sibling-index() ফাংশনটি তার সিibling-দের মধ্যে বর্তমান এলিমেন্টটির ১-ভিত্তিক অবস্থান রিটার্ন করে।

এই ফাংশনগুলো আপনাকে জাভাস্ক্রিপ্ট বা ইউটিলিটি ক্লাসের প্রয়োজন ছাড়াই CSS-এ ডায়নামিকভাবে লেআউটের আকার, ধাপে ধাপে অ্যানিমেশনের বিলম্ব এবং রঙের তারতম্য গণনা করতে দেয়। এগুলো এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।

autocorrect গ্লোবাল এইচটিএমএল অ্যাট্রিবিউটটি বেসলাইন হয়ে যায়।

ক্রোম ১৫২ গ্লোবাল autocorrect এইচটিএমএল অ্যাট্রিবিউটের জন্য সমর্থন যোগ করেছে এবং এটি HTMLElement.prototype.autocorrect এ প্রতিফলিত হয়েছে।

autocorrect অ্যাট্রিবিউটের মাধ্যমে আপনি নিয়ন্ত্রণ করতে পারেন যে, <input> , <textarea> ` এবং contenteditable যুক্ত এলিমেন্টগুলোর মতো সম্পাদনাযোগ্য এলিমেন্টগুলিতে স্বয়ংক্রিয় বানান ও বিরামচিহ্ন সংশোধন চালু থাকবে কি না। এটি on এবং off গ্রহণ করে।

যেহেতু সাফারি এবং ফায়ারফক্স ইতিমধ্যেই এই অ্যাট্রিবিউটটি সমর্থন করে, তাই গ্লোবাল autocorrect অ্যাট্রিবিউটটি এখন নতুনভাবে বেসলাইন হিসেবে উপলব্ধ হয়েছে।

::backdrop , ::scroll-marker , এবং ::view-transition এর জন্য CSSPseudoElement সমর্থন

Chrome 152-তে CSSPseudoElement সাপোর্ট (যা আগে ::after , ::before , এবং ::marker জন্য উপলব্ধ ছিল) বাড়িয়ে এখন এতে ::backdrop , ::scroll-marker , এবং ::view-transition অন্তর্ভুক্ত করা হয়েছে।

::backdrop এর জন্য CSSPseudoElement সমর্থন করলে আপনি সরাসরি ব্যাকড্রপ সিউডো-এলিমেন্টে ইভেন্ট লিসেনার যুক্ত করতে পারেন, যার ফলে কোঅর্ডিনেট বাউন্ডিং বক্স গণনা না করেই ডায়ালগের কন্টেন্টের বাইরে ক্লিক করে ডায়ালগটি বন্ধ করা সহজ হয়। ::scroll-marker এর ক্ষেত্রে, এটি ব্যবহারকারীর ইন্টারঅ্যাকশন ইভেন্ট ক্যাপচার করতে সহায়তা করে, এবং ::view-transition ক্ষেত্রে, এটি ট্রানজিশন ইন্টারসেপ্ট করতে বা জ্যামিতি-সচেতন অ্যানিমেশন তৈরি করতে সক্ষম করে।

` alpha() ` CSS ফাংশন ব্যবহার করে আপেক্ষিক আলফা রঙ

ক্রোম ১৫২-এ আপেক্ষিক আলফা রঙের জন্য সিএসএস কালার ৫ থেকে alpha() ফাংশনটি চালু করা হয়েছে।

` alpha() ` ফাংশনটি একটি বিদ্যমান মূল রঙ গ্রহণ করে এবং সেই রঙটিকেই একটি সমন্বয়কৃত আলফা (স্বচ্ছতা) চ্যানেলসহ ফেরত দেয়, যা রঙের চ্যানেলগুলিকে অক্ষুণ্ণ রাখে এবং যেকোনো কালার স্পেসে নির্বিঘ্নে কাজ করে।

window-drag CSS প্রপার্টি

ক্রোম ১৫২-এ স্ট্যান্ডার্ড window-drag CSS প্রপার্টির জন্য সমর্থন যোগ করা হয়েছে।

ইনস্টল করা ডেস্কটপ ওয়েব অ্যাপ্লিকেশন তৈরি করার সময়, আপনি আপনার লেআউটের নির্দিষ্ট এলাকা—যেমন কাস্টম টাইটেল বার বা হেডার—কে ড্র্যাগযোগ্য অঞ্চল হিসেবে চিহ্নিত করতে window-drag ব্যবহার করতে পারেন। এই অঞ্চলগুলিতে পয়েন্টার ড্র্যাগ করলে পেজের কন্টেন্ট স্ক্রল বা সিলেক্ট করার পরিবর্তে টপ-লেভেল অ্যাপ্লিকেশন উইন্ডোটি সরে যায়। এটি পুরোনো app-region প্রপার্টিকে প্রমিত করে এবং এর নাম পরিবর্তন করে, যেখানে স্ট্যান্ডার্ড CSS ইনহেরিটেন্স সহ move এবং none ভ্যালু ব্যবহার করা হয়।

OpaqueRange API

ক্রোম ১৫২-এ OpaqueRange চালু করা হয়েছে, যা <textarea> এবং টেক্সট-ভিত্তিক <input> এলিমেন্টের মতো ফর্ম কন্ট্রোল ভ্যালুর মধ্যে থাকা একটি লাইভ টেক্সট রেঞ্জকে উপস্থাপন করে।

OpaqueRange getBoundingClientRect() , getClientRects() , এবং CSS Custom Highlight API-এর মতো রেঞ্জ-ভিত্তিক API-গুলোকে ফর্ম কন্ট্রোল টেক্সটের উপর ইনলাইন সাজেশন, বানান হাইলাইট, এবং অ্যাঙ্কর্ড পপওভারের জন্য কাজ করতে সক্ষম করে। এটি অভ্যন্তরীণ শ্যাডো ট্রি কন্টেইনার নোডের পরিবর্তে ভ্যালু অফসেট প্রকাশ করার মাধ্যমে কম্পোনেন্ট এনক্যাপসুলেশন বজায় রাখে।

ফায়ারফক্সে নতুন Iterator সহায়ক পদ্ধতি

ফায়ারফক্স ১৫৪-এ Iterator.prototype এ বেশ কয়েকটি নতুন মেথড যোগ করা হয়েছে:

• includes() : কোনো ইটারেটর একটি নির্দিষ্ট মান তৈরি করে কিনা তা পরীক্ষা করে এবং true বা false রিটার্ন করে।
• join() : ইটারেটর দ্বারা প্রাপ্ত সমস্ত উপাদানকে একটি ডিলিমিটার দ্বারা পৃথক করে একটি স্ট্রিং-এ সংযুক্ত করে, যা Array.prototype.join() এর অনুরূপ।
• chunks() : একটি সহায়ক ইটারেটর রিটার্ন করে যা অন্তর্নিহিত ইটারেটর থেকে ধারাবাহিক নির্দিষ্ট আকারের অ্যারে খণ্ড প্রদান করে।
• windows() : একটি সহায়ক ইটারেটর ফেরত দেয় যা ইটারেটরটির উপর একটি স্লাইডিং উইন্ডো অ্যারে প্রদান করে।

ফায়ারফক্সে ওয়েবআরটিসি ট্রান্সপোর্টের উন্নতি

ফায়ারফক্স ১৫৪-এ ওয়েবআরটিসি ট্রান্সপোর্টের বেশ কিছু নতুন সংযোজন করা হয়েছে:

• RTCIceTransport.getSelectedCandidatePair() এবং selectedcandidatepairchange ইভেন্ট, যা অ্যাপ্লিকেশনগুলিকে বর্তমানে সক্রিয় ICE ক্যান্ডিডেট পেয়ারটি পরিদর্শন করার সুযোগ দেয়।
• RTCDtlsTransport এর error ইভেন্ট, যা অ্যাপ্লিকেশনগুলিকে DTLS ট্রান্সপোর্ট এবং ফিঙ্গারপ্রিন্ট ত্রুটি শোনার সুযোগ দেয়।
• RTCRtpReceiver.getParameters() এবং RTCRtpSender.getParameters() -এ rtcp কনফিগারেশন প্যারামিটারের জন্য সমর্থন।
• WebRTC পরিবহন পরিসংখ্যান, RTCCertificateStats এবং অতিরিক্ত RTCTransportStats রিপোর্ট করা।

Chrome, Safari এবং এখন Firefox 154-এ সমর্থনের সাথে, RTCIceTransport.getSelectedCandidatePair() এবং RTCDtlsTransport error event এখন Baseline Newly উপলব্ধ।

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

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

ক্রোম ১৫৩ বিটা-তে একক-অক্ষ স্ক্রল কন্টেইনার ( overflow: scroll clip ) এবং জেসচার অ্যাক্সিস লকিং প্রতিরোধ করার জন্য scroll-axis-lock CSS প্রপার্টি অন্তর্ভুক্ত করা হয়েছে। জাভাস্ক্রিপ্ট অংশে, এতে TC39 Iterator join() এবং জয়েন্ট ইটারেশন ( zip ) যোগ করা হয়েছে। ওয়েব এপিআই-তে নতুন সংযোজন হিসেবে রয়েছে একক-ক্ষমতার জন্য নিবেদিত ডিক্লারেটিভ এলিমেন্ট <camera> এবং <microphone> ।

ফায়ারফক্স ১৫৫ বিটা SVGAElement HyperlinkElementUtils বাস্তবায়ন করার জন্য আপডেট করেছে, যা SVG <a> এলিমেন্টগুলিতে স্ট্যান্ডার্ড URL প্রোপার্টি ( protocol , hostname , pathname , search , hash ) এবং origin প্রকাশ করে। এটি SVG লিস্ট ইন্টারফেসগুলিতে ( SVGNumberList , SVGPointList , SVGStringList , SVGTransformList ) ইনডেক্সড সেটারও যোগ করে।