প্রকাশিত: ৩ জুন, ২০২৬
বেসলাইন মাসিক সারসংক্ষেপে আপনাকে স্বাগতম। মে ২০২৬-এ, বেশ কিছু নতুন CSS ফিচার, ইভেন্ট প্রপার্টি এবং API সংযোজন বেসলাইনে নতুনভাবে উপলব্ধ হয়েছে, এবং একই সাথে CSS ইউনিট, ইউজার ইন্টারঅ্যাকশন প্রপার্টি ও সিউডো-ক্লাসগুলো বেসলাইনে ব্যাপকভাবে উপলব্ধ হয়েছে। এর পাশাপাশি ডেভেলপার কমিউনিটির পক্ষ থেকেও গুরুত্বপূর্ণ আপডেট এসেছে।
সিএসএস ২০২৬ সমীক্ষার অবস্থা
ওয়েব কমিউনিটির বার্ষিক মূল্যায়ন এসে গেছে: ‘ স্টেট অফ সিএসএস ২০২৬’ সমীক্ষাটি এখন উন্মুক্ত। এই বছর, আয়োজকরা সমীক্ষাটিকে আরও পরিমার্জিত করার জন্য সচেতন প্রচেষ্টা চালিয়েছেন, বিশেষ করে এআই-সহায়তাযুক্ত কোডিংয়ের যুগে ডেভেলপারদের জন্য সবচেয়ে গুরুত্বপূর্ণ ফিচারগুলোর উপর মনোযোগ দিয়ে। ব্রাউজার নির্মাতারা তাদের ইঞ্জিনিয়ারিং রোডম্যাপকে অগ্রাধিকার দিতে এবং ডেভেলপারদের সমস্যাগুলো সমাধান করতে এই ফলাফলগুলো নিবিড়ভাবে পর্যবেক্ষণ করেন। ১লা জুলাই সমীক্ষাটি বন্ধ হওয়ার আগে, পরিবর্তনশীল সিএসএস জগতে আপনার অভিজ্ঞতা শেয়ার করে নিজের মতামত জানাতে ভুলবেন না।
বেসলাইন নতুন উপলব্ধ বৈশিষ্ট্য
এই বিভাগের বৈশিষ্ট্যগুলি মে ২০২৬ থেকে মূল ব্রাউজার সেটে সমর্থিত এবং এখন বেসলাইন হিসাবে নতুনভাবে উপলব্ধ।
কন্টেইনার শৈলীর কোয়েরি
কন্টেইনার কোয়েরি এখন আর আকারের দ্বারা সীমাবদ্ধ নয়। স্টাইল কোয়েরির মাধ্যমে, আপনি এখন একটি প্যারেন্ট কন্টেইনারের কাস্টম প্রোপার্টির উপর ভিত্তি করে এলিমেন্টগুলিতে স্টাইল প্রয়োগ করতে পারেন। এটি আপনাকে জটিল ক্লাস কাঠামোর উপর নির্ভর না করেই অত্যন্ত মডুলার কম্পোনেন্ট তৈরি করতে দেয়, যা তাদের পারিপার্শ্বিক অবস্থানের উপর ভিত্তি করে নিজেদের থিম বা স্টাইলিং পরিবর্তন করতে পারে।
@container সম্পর্কে আরও জানতে MDN রেফারেন্স পৃষ্ঠাটি দেখুন।
:open সিউডো-ক্লাস
<dialog> এবং <details> -এর মতো খোলা ও বন্ধ অবস্থা আছে এমন এলিমেন্টগুলোকে স্টাইল করার জন্য আগে অ্যাট্রিবিউট চেক করা বা ক্লাস ম্যানেজ করার প্রয়োজন হতো। :open সিউডো-ক্লাসটি এই প্রক্রিয়াটিকে সহজ করে, কারণ এটি শুধুমাত্র এলিমেন্টগুলো খোলা অবস্থায় থাকলেই সেগুলোকে ম্যাচ করে, যার ফলে আরও পরিচ্ছন্ন এবং ডিক্লারেটিভ CSS তৈরি করা সম্ভব হয়।
:open সিউডো-ক্লাসটির বিষয়ে MDN পৃষ্ঠায় পড়ুন।
ToggleEvent.source
Popover API নিয়ে কাজ করার সময়, স্টেট পরিবর্তনের প্রতি সাড়া দেওয়া অত্যন্ত গুরুত্বপূর্ণ। ToggleEvent ইন্টারফেসের source প্রপার্টিটি সেই কন্ট্রোল এলিমেন্টটি রিটার্ন করে, যা পপওভার টগল অ্যাকশনটি ট্রিগার করেছে। এর মাধ্যমে আপনি ইভেন্টের উৎস শনাক্ত করতে এবং জটিল UI ইন্টারঅ্যাকশনগুলো সমন্বয় করতে পারেন।
ToggleEvent.source সম্পর্কে আরও জানতে MDN ডকুমেন্টেশন দেখুন।
image-rendering প্রপার্টি
image-rendering CSS প্রপার্টিটি আপনাকে ছবির আকার পরিবর্তনের সময় ব্যবহৃত স্কেলিং অ্যালগরিদম নিয়ন্ত্রণ করতে দেয়। এটি বিশেষত পিক্সেল আর্ট, কম-রেজোলিউশনের ছবি বা QR কোডের জন্য উপযোগী, যেখানে ঝাপসা ইন্টারপোলেশন এড়িয়ে স্কেলিংকে স্পষ্ট এবং পিক্সেলযুক্ত রাখা জরুরি।
ইমেজ-রেন্ডারিং এর জন্য MDN পেজ থেকে এর ব্যবহার পদ্ধতি জেনে নিন।
text-decoration-skip-ink: all
ডিসেন্ডারের মধ্য দিয়ে যাওয়া আন্ডারলাইন কখনও কখনও অগোছালো দেখাতে পারে। যেখানে text-decoration-skip-ink: auto শুধুমাত্র ছেদ করার সময় কালি ব্যবহার এড়িয়ে যায়, সেখানে এটিকে all এ সেট করলে আন্ডারলাইনটি ছেদ নির্বিশেষে সমস্ত গ্লিফ এড়িয়ে যেতে বাধ্য হয়, যা টাইপোগ্রাফির নান্দনিকতার উপর আরও বেশি নিয়ন্ত্রণ প্রদান করে।
text-decoration-skip-ink সম্পর্কে বিস্তারিত জানতে MDN গাইডটি পড়ুন।
SharedWorker
SharedWorker API একটি বিশেষায়িত ব্যাকগ্রাউন্ড ওয়ার্কার প্রদান করে, যা একই অরিজিনের বিভিন্ন উইন্ডো, ট্যাব বা আইফ্রেমের মতো একাধিক ব্রাউজিং কনটেক্সট থেকে অ্যাক্সেস করা যায়। ট্যাবের সীমানা পেরিয়ে স্টেট শেয়ার করা, কানেকশন ম্যানেজ করা বা ব্যাকগ্রাউন্ড টাস্ক সমন্বয় করার জন্য এটি অত্যন্ত শক্তিশালী।
SharedWorker সম্পর্কে জানতে MDN ডকুমেন্টেশন দেখুন।
বেসলাইন ব্যাপকভাবে উপলব্ধ বৈশিষ্ট্য
নিম্নলিখিত বৈশিষ্ট্যগুলি এখন বেসলাইন হিসাবে ব্যাপকভাবে উপলব্ধ হয়েছে, যার অর্থ হল এগুলি এখন আপনার প্রকল্পগুলিতে ব্যাপকভাবে সামঞ্জস্যপূর্ণ এবং ব্যবহারযোগ্য।
lh দৈর্ঘ্যের একক
lh রিলেটিভ ইউনিটটি যে এলিমেন্টে ব্যবহৃত হয়, তার গণনাকৃত লাইন-হাইটের সাথে সঙ্গতিপূর্ণ। এর ফলে আইকন ব্যাজ বা ব্যাকগ্রাউন্ড হাইলাইটের মতো এলিমেন্টগুলোর আকার নির্ধারণ করা সহজ হয়, যাতে সেগুলো টেক্সটের একটি লাইনের উচ্চতার সাথে নিখুঁতভাবে মিলে যায়।
দৈর্ঘ্যের একক সম্পর্কে আরও জানতে MDN রেফারেন্স দেখুন।
rlh দৈর্ঘ্যের একক
lh এর মতোই, rlh ইউনিটটি লাইন-হাইট নির্দেশ করে, তবে এটি বিশেষভাবে রুট এলিমেন্টের ( <html> ) জন্য প্রযোজ্য। এর মাধ্যমে আপনি লোকাল ফন্ট সাইজ বা লাইন-হাইট ওভাররাইড নির্বিশেষে আপনার পুরো পেজ জুড়ে একটি সামঞ্জস্যপূর্ণ উল্লম্ব ছন্দ বজায় রাখতে পারেন।
দৈর্ঘ্যের একক সম্পর্কে আরও জানতে MDN রেফারেন্স পড়ুন।
Navigator.userActivation
অনেক ওয়েব এপিআই (যেমন ভিডিও প্লেব্যাক, পপআপ বা ক্লিপবোর্ড অ্যাক্সেস) চালু হওয়ার আগে ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রয়োজন হয়। Navigator.userActivation প্রপার্টিটি একটি অবজেক্ট রিটার্ন করে, যাতে উইন্ডোতে ব্যবহারকারীর বর্তমান এবং পূর্ববর্তী অ্যাক্টিভেশন অবস্থা সম্পর্কে তথ্য থাকে, যা স্ক্রিপ্টকে ব্যবহারকারীর কোনো জেসচার ঘটেছে কিনা তা যাচাই করতে সাহায্য করে।
Navigator.userActivation-এর জন্য MDN পৃষ্ঠায় এটি কীভাবে ব্যবহার করতে হয় তা জেনে নিন।
clip-path
` clip-path CSS প্রপার্টি আপনাকে একটি ক্লিপিং রিজিয়ন তৈরি করতে দেয়, যা নির্ধারণ করে কোনো এলিমেন্টের কোন অংশ দৃশ্যমান থাকবে। সাধারণ আকৃতি (যেমন বৃত্ত, উপবৃত্ত বা বহুভুজ) অথবা SVG পাথ ব্যবহার করে, আপনি ওভারফ্লো হাইড না করেই আকর্ষণীয় লেআউট ডিজাইন এবং ট্রানজিশন তৈরি করতে পারেন।
clip-path এর বাস্তবায়নের বিস্তারিত তথ্যের জন্য MDN পৃষ্ঠাটি দেখুন।
:user-invalid ছদ্ম-শ্রেণী
:invalid এর বিপরীতে, যা একটি পেজ লোড হওয়ার সাথে সাথেই স্টাইলিং প্রয়োগ করে (যা প্রায়শই খারাপ ইউজার এক্সপেরিয়েন্সের কারণ হয়), :user-invalid সিউডো-ক্লাসটি শুধুমাত্র ব্যবহারকারীর ইন্টারঅ্যাকশনের পরেই অবৈধ ফর্ম এলিমেন্টগুলোকে ম্যাচ করে। এর মানে হলো, ব্যবহারকারী ফিল্ডটি ছেড়ে যাওয়ার পরেও আপনি ফর্ম ভ্যালিডেশনের ফিডব্যাক দেখাতে পারেন।
:user-invalid এর জন্য MDN ডকুমেন্টেশনে এটি কীভাবে কাজ করে তা জানুন।
এখানেই শেষ।
বেসলাইন-সম্পর্কিত কোনো কিছু বাদ পড়ে গেলে আমাদের জানান, এবং আমরা নিশ্চিত করব যে এটি পরবর্তী সংস্করণে অন্তর্ভুক্ত করা হবে! বেসলাইন সম্পর্কে আপনার কোনো প্রশ্ন থাকলে বা মতামত জানাতে চাইলে, আপনি আমাদের ইস্যু ট্র্যাকারে একটি ইস্যু ফাইল করতে পারেন।