প্রকাশিত: ১৭ জুলাই, ২০২৬
বেসলাইন মাসিক সারসংক্ষেপে আপনাকে আবারও স্বাগত। জুন ২০২৬-এ, field-sizing বেসলাইনে নতুনভাবে উপলব্ধ হয়েছে, যা ফর্ম কন্ট্রোলগুলোকে তাদের বিষয়বস্তু অনুযায়ী স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে দেয়। একই সাথে, ডেভেলপার কমিউনিটির গুরুত্বপূর্ণ আপডেটের পাশাপাশি CSS, HTML, এবং Web API-এর বিস্তৃত পরিসরের ফিচারগুলো বেসলাইনে ব্যাপকভাবে উপলব্ধ মর্যাদা লাভ করেছে।
ওয়েব প্ল্যাটফর্মের স্থিতির উপর বেসলাইন সতর্কতা
ওয়েব প্ল্যাটফর্ম স্ট্যাটাস ড্যাশবোর্ডে থাকা বেসলাইন অ্যালার্টের মাধ্যমে ওয়েব ফিচারগুলো কখন ইন্টারঅপারেবল হচ্ছে তার খোঁজ রাখা এখন আরও সহজ। GitHub দিয়ে সাইন ইন করে, আপনি ফিচারগুলো বেসলাইন নিউলি অ্যাভেইলেবল, ওয়াইডলি অ্যাভেইলেবল হওয়ার সাথে সাথে বা নতুন ব্রাউজার ইমপ্লিমেন্টেশন পাওয়ার সাথে সাথে সেগুলোর নোটিফিকেশনের জন্য সাবস্ক্রাইব করতে পারেন। সাবস্ক্রিপশনগুলো মাসিক, সাপ্তাহিক বা তাৎক্ষণিক সময়সূচীতে ইমেল আপডেট বা কাস্টম RSS ফিড পাঠানোর জন্য কনফিগার করা যেতে পারে। আপনি সমস্ত HTML ফিচারের মতো সেভ করা সার্চের জন্য অ্যালার্ট নির্দিষ্ট করতে পারেন, কাস্টম নিউজলেটার তৈরি করতে পারেন, শেয়ার করার যোগ্য ফিচার লিস্ট তৈরি করতে পারেন, অথবা আপনার ইঞ্জিনিয়ারিং টিমকে অবহিত করার জন্য স্ল্যাক ওয়েবহুক কনফিগার করতে পারেন।
বেসলাইন অ্যালার্ট পরিচিতি- তে আরও জানুন।
বেসলাইন নতুন উপলব্ধ বৈশিষ্ট্য
এই বিভাগের বৈশিষ্ট্যগুলি জুন ২০২৬ থেকে মূল ব্রাউজার সেটে সমর্থিত এবং এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।
field-sizing
field-sizing CSS প্রপার্টিটি ফর্ম এলিমেন্টগুলোর—যেমন <textarea> , <input> , এবং <select> —সাইজিংয়ের আচরণ নিয়ন্ত্রণ করে, যেগুলোর ঐতিহ্যগতভাবে একটি নির্দিষ্ট ডিফল্ট মাপ থাকে। field-sizing: content ব্যবহার করলে ফর্ম কন্ট্রোলগুলো তাদের কন্টেন্টের সাথে মানানসই হওয়ার জন্য স্বয়ংক্রিয়ভাবে প্রসারিত বা সংকুচিত হয়, ফলে কাস্টম জাভাস্ক্রিপ্ট অটো-রিসাইজ স্ক্রিপ্টের প্রয়োজনীয়তা কমে যায়।
ফিল্ড-সাইজিং সম্পর্কে আরও জানতে MDN রেফারেন্স পেজটি দেখুন।
বেসলাইন ব্যাপকভাবে উপলব্ধ বৈশিষ্ট্য
নিম্নলিখিত বৈশিষ্ট্যগুলি এখন ব্যাপকভাবে উপলব্ধ হয়েছে, যার অর্থ হল এগুলি এখন আপনার প্রকল্পগুলিতে ব্যাপকভাবে সামঞ্জস্যপূর্ণ এবং ব্যবহারযোগ্য।
:has() ছদ্ম-শ্রেণী
:has() CSS প্যারেন্ট সিলেক্টরটি আপনাকে কোনো এলিমেন্টকে তার ডিসেন্ডেন্ট বা পরবর্তী সিবলিংদের উপর ভিত্তি করে স্টাইল করতে দেয়। এই ফাংশনাল সিউডো-ক্লাসটি DOM স্ট্রাকচার পরীক্ষা করার জন্য জাভাস্ক্রিপ্টের প্রয়োজন ছাড়াই সরাসরি CSS-এ শর্তসাপেক্ষ লেআউট প্যাটার্ন প্রয়োগ করতে সক্ষম করে।
:has সিউডো-ক্লাস সম্পর্কে আরও জানতে MDN পৃষ্ঠাটি পড়ুন।
HTMLIFrameElement.loading
<iframe> এলিমেন্টের loading প্রপার্টি এমবেড করা ফ্রেমের জন্য লেজি লোডিং সক্ষম করে। loading="lazy" উল্লেখ করার মাধ্যমে, ব্রাউজারগুলো অফস্ক্রিন আইফ্রেম লোড করা স্থগিত রাখে যতক্ষণ না সেগুলোকে স্ক্রল করে ভিউপোর্টের কাছাকাছি আনা হয়, যা নেটওয়ার্ক ব্যান্ডউইথ এবং প্রাথমিক পেজ লোডের অতিরিক্ত সময় বাঁচায়।
HTMLIFrameElement.loading সম্পর্কে বিস্তারিত জানতে MDN রেফারেন্সটি দেখুন।
CanvasRenderingContext2D.reset()
2D ক্যানভাস কনটেক্সটের reset() মেথডটি ড্রয়িং কনটেক্সটের অবস্থা পরিষ্কার করে—ট্রান্সফরমেশন, ক্লিপিং পাথ, লাইন স্টাইল এবং ফিল স্টাইলের মতো প্রোপার্টিগুলোকে তাদের ডিফল্ট মানে রিসেট করে দেয়। এর ফলে, ম্যানুয়ালি প্রোপার্টি পরিষ্কার করার ঝামেলা ছাড়াই একটি ক্যানভাস কনটেক্সটকে নির্বিঘ্নে পুনরায় ব্যবহার করা যায়।
CanvasRenderingContext2D.reset সম্পর্কে আরও জানতে MDN ডকুমেন্টেশন দেখুন।
cap দৈর্ঘ্যের একক
cap ফন্ট-রিলেটিভ ইউনিটটি এলিমেন্টের ফন্টের নামমাত্র ক্যাপ হাইটের সাথে সঙ্গতিপূর্ণ। এটি আপনাকে বড় হাতের অক্ষরের উচ্চতার সাপেক্ষে এলিমেন্টগুলোকে অ্যালাইন ও সাইজ করতে দেয়, যা নির্ভুল টাইপোগ্রাফিক লেআউট তৈরি করতে সক্ষম করে।
দৈর্ঘ্যের একক সম্পর্কে আরও জানতে MDN রেফারেন্স দেখুন।
counter-set বৈশিষ্ট্য
` counter-set CSS প্রপার্টিটি একটি CSS কাউন্টারকে একটি নির্দিষ্ট মানে সেট করে, যা counter-reset এবং counter-increment পরিপূরক হিসেবে কাজ করে। সংখ্যাযুক্ত তালিকা, ডকুমেন্টের রূপরেখা বা কাস্টম কাউন্টার সিকোয়েন্স পরিচালনা করার সময় এটি নিয়ন্ত্রণ প্রদান করে।
কাউন্টার-সেট সম্পর্কে বিস্তারিত জানতে MDN পৃষ্ঠাটি পড়ুন।
createImageBitmap()
` createImageBitmap() ` স্ট্যাটিক মেথডটি <img> , <canvas> , Blob , বা ImageData সহ বিভিন্ন ইমেজ সোর্স থেকে একটি অ্যাসিঙ্ক্রোনাস বিটম্যাপ ইমেজ তৈরি করে। যেহেতু এটি মেইন থ্রেডের বাইরে ইমেজ ডিকোড করে, তাই জটিল ক্যানভাস গ্রাফিক্স হ্যান্ডেল করার সময় এটি UI পারফরম্যান্স ব্লক হওয়া এড়ায়।
createImageBitmap-এর বাস্তবায়নের বিস্তারিত তথ্যের জন্য MDN ডকুমেন্টেশন দেখুন।
<easing-function> ডেটা টাইপ
<easing-function> CSS ডেটা টাইপটি ট্রানজিশন এবং অ্যানিমেশনের জন্য গাণিতিক পরিবর্তনের হারের কার্ভ বর্ণনা করে। ease-in বা cubic-bezier() এর মতো সাধারণ কীওয়ার্ড ছাড়াও, এটি কাস্টম স্প্রিং বা বাউন্স এফেক্ট তৈরি করার জন্য linear() এর মতো ফাংশন সমর্থন করে।
easing-function এর ব্যবহার পদ্ধতি জানতে MDN রেফারেন্স দেখুন।
& নেস্টিং নির্বাচক
বিল্ট-ইন CSS নেস্টিং ব্যবহার করার সময়, & নেস্টিং সিলেক্টরটি চাইল্ড রুল সিলেক্টরগুলোকে তাদের প্যারেন্ট সিলেক্টরের সাথে সুস্পষ্টভাবে যুক্ত করে। এটি নেস্টেড হোভার, ফোকাস, বা সিউডো-ক্লাস স্টেট সংজ্ঞায়িত করার সময় স্বচ্ছতা এবং সঠিক স্পেসিফিসিটি নিয়ম নিশ্চিত করে।
নেস্টিং সিলেক্টর সম্পর্কে বিস্তারিত জানতে MDN গাইডটি পড়ুন।
rel="preload" এর সাথে রেসপন্সিভ প্রি-লোডিং
<link rel="preload"> এলিমেন্টের media অ্যাট্রিবিউটটি গুরুত্বপূর্ণ অ্যাসেটগুলোর রেসপন্সিভ প্রি-লোডিং সক্ষম করে। media query-এর সাথে rel="preload" ব্যবহার করে, ব্রাউজারগুলো লোডিং লাইফসাইকেলের একেবারে শুরুতে শুধুমাত্র সেই অ্যাসেটগুলো ডাউনলোড করে, যেগুলো ব্যবহারকারীর ভিউপোর্ট উইডথ বা ডিসপ্লে বৈশিষ্ট্যের সাথে মেলে।
rel="preload" এর ব্যবহার পদ্ধতি জানতে MDN ডকুমেন্টেশন দেখুন।
HTMLMediaElement.preservesPitch
<audio> এবং <video> এলিমেন্টের preservesPitch প্রপার্টিটি নিয়ন্ত্রণ করে যে, playbackRate পরিবর্তনের সময় ব্রাউজার অডিওর পিচ সামঞ্জস্য করবে কি না। এটিকে false সেট করলে মিডিয়া প্লেব্যাকের গতি বাড়ানো বা কমানোর সময় পিচ পরিবর্তন করা যায়।
HTMLMediaElement.preservesPitch সম্পর্কে বিস্তারিত জানতে MDN পেজটি দেখুন।
:dir() ছদ্ম-শ্রেণী
:dir() CSS সিউডো-ক্লাসটি টেক্সটের দিকনির্দেশনার (যেমন ltr বা rtl ) উপর ভিত্তি করে এলিমেন্টগুলোকে ম্যাচ করে, যা dir মতো HTML অ্যাট্রিবিউট বা কম্পিউটেড টেক্সট কনটেক্সট থেকে উত্তরাধিকারসূত্রে প্রাপ্ত দিকনির্দেশনার সাথে মেলে।
:dir সিউডো-ক্লাস সম্পর্কে আরও জানতে MDN পৃষ্ঠাটি দেখুন।
pow() গণিত ফাংশন
pow() CSS ফাংশনটি সরাসরি CSS ডিক্লারেশনের মধ্যেই এক্সপোনেনশিয়াল পাওয়ার ভ্যালু গণনা করে, যা একটি বেস সংখ্যাকে এক্সপোনেন্টে উন্নীত করে (উদাহরণস্বরূপ, pow(2, 3) )। এটি রেসপন্সিভ স্কেলিং এবং গাণিতিক গ্রিড সম্পর্ককে সহজ করে তোলে।
pow ফাংশন সম্পর্কে বিস্তারিত জানতে MDN রেফারেন্সটি পড়ুন।
CSS mask প্রপার্টি
` mask CSS শর্টহ্যান্ড প্রপার্টিটি ক্লিপিং লেয়ার হিসেবে ইমেজ বা গ্রেডিয়েন্ট ব্যবহার করে কোনো এলিমেন্টের অংশবিশেষ লুকিয়ে ফেলে। এটি mask-image , mask-position , এবং mask-repeat এর মতো সাব-প্রপার্টিগুলোকে একত্রিত করে জটিল ভিজ্যুয়াল মাস্কিং ইফেক্ট তৈরি করে।
mask প্রপার্টি সম্পর্কে আরও জানতে MDN পেজটি দেখুন।
@media (scripting)
scripting মিডিয়া ফিচারটি পরীক্ষা করে দেখে যে ব্রাউজার কনটেক্সটে ক্লায়েন্ট-সাইড স্ক্রিপ্টিং (যেমন জাভাস্ক্রিপ্ট) সক্রিয় এবং উপলব্ধ আছে কি না। এর ফলে প্রগ্রেসিভ এনহ্যান্সমেন্ট স্টাইলগুলো সক্রিয় জাভাস্ক্রিপ্টসহ বা জাভাস্ক্রিপ্টবিহীন উভয় পরিবেশেই প্রয়োগ করা যায়।
স্ক্রিপ্টিং মিডিয়া ফিচার সম্পর্কে আরও জানতে MDN রেফারেন্স দেখুন।
URL.canParse()
URL.canParse() স্ট্যাটিক মেথডটি কোনো এক্সেপশন থ্রো না করেই প্রদত্ত স্ট্রিংটি একটি বৈধ ও পার্সযোগ্য URL (ঐচ্ছিক বেস URL সহ) কিনা তা যাচাই করে, যা URL অবজেক্ট ইনস্ট্যানশিয়েট করার আগে রানটাইম URL ভ্যালিডেশনকে সহজ করে তোলে।
URL.canParse-এর বাস্তবায়ন সংক্রান্ত বিস্তারিত তথ্যের জন্য MDN ডকুমেন্টেশন দেখুন।
স্টোরেজ অ্যাক্সেস এপিআই
স্টোরেজ অ্যাক্সেস এপিআই তৃতীয় পক্ষের <iframe> -এর মধ্যে এমবেড করা ক্রস-সাইট কন্টেন্টের জন্য আনপার্টিশনড কুকি এবং স্টোরেজ অ্যাক্সেসের অনুরোধ করার একটি ব্যবস্থা প্রদান করে, যা ডোমেন সীমানা জুড়ে প্রমাণীকরণ এবং স্টেটফুল ইন্টারঅ্যাকশন সক্ষম করে।
স্টোরেজ অ্যাক্সেস এপিআই (Storage Access API) সম্পর্কে বিস্তারিত জানতে এমডিএন (MDN) পৃষ্ঠাটি পড়ুন।
এখানেই শেষ।
বেসলাইন-সম্পর্কিত কোনো কিছু বাদ পড়ে গেলে আমাদের জানান, এবং আমরা নিশ্চিত করব যে এটি পরবর্তী সংস্করণে অন্তর্ভুক্ত করা হবে! বেসলাইন সম্পর্কে আপনার কোনো প্রশ্ন থাকলে বা মতামত জানাতে চাইলে, আপনি আমাদের ইস্যু ট্র্যাকারে একটি ইস্যু ফাইল করতে পারেন।