ওয়েবে নতুন কি আছে৷

Rachel Andrew

Google I/OI-এ গত বছর I/O-তে আমাদের ঘোষণার পর থেকে বেসলাইন কীভাবে বিকশিত হয়েছে তার খবর শেয়ার করেছে। আমি ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড, RUM আর্কাইভের সাথে ইন্টিগ্রেশন এবং RUMvision-এর সাথে আসন্ন ইন্টিগ্রেশন ঘোষণা করেছি। এই পোস্টটি আলোচনা থেকে সমস্ত সংস্থান এক জায়গায় নিয়ে আসে।

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড সমগ্র ওয়েব প্ল্যাটফর্ম দেখার একটি উত্তেজনাপূর্ণ নতুন উপায়, এবং স্বতন্ত্র বৈশিষ্ট্যগুলির আন্তঃকার্যক্ষমতার দিকে যাত্রা এবং বেসলাইনের অংশ হয়ে উঠেছে। ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ডের ঘোষণায় এটি সম্পর্কে আরও জানুন।

আপনি প্রতিদিন যে সরঞ্জামগুলি ব্যবহার করেন তার সাথে বেসলাইন একীভূত করা সর্বদা এই প্রকল্পের দৃষ্টিভঙ্গির অংশ। আমরা ব্রাউজার সামঞ্জস্যের সাথে মোকাবিলা করতে চাই এমন কিছু যা আপনাকে চিন্তা করতে বেশি সময় ব্যয় করতে হবে না। RUM আর্কাইভ ইন্টিগ্রেশন সম্পর্কে আরও জানুন, এবং শীঘ্রই আরও টুলিং প্রদানকারীর খবরের জন্য এই স্থানটি দেখুন।

বেসলাইনে নতুন

I/OI-তে 12টি ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য শেয়ার করা হয়েছে যা সম্প্রতি নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে উঠেছে। এই বৈশিষ্ট্যগুলি এখন Chrome, Edge, Firefox, এবং Safari-এ উপলব্ধ, এবং ছোট ছোট সংযোজন থেকে শুরু করে যা বিকাশকে স্ট্রীমলাইন করতে পারে, ডেভেলপারদের দ্বারা সবচেয়ে কাঙ্ক্ষিত কিছু বৈশিষ্ট্য পর্যন্ত — যার মধ্যে রয়েছে কন্টেইনার কোয়েরি এবং :has() ।

আকার ধারক প্রশ্ন

সাইজ কন্টেইনার ক্যোয়ারী আপনাকে মিডিয়া কোয়েরি সহ ভিউপোর্টের সাইজ টার্গেট করতে সক্ষম হওয়ার পরিবর্তে একটি কন্টেইনারের প্রস্থ বা ইনলাইন-আকারের উপর ভিত্তি করে আপনার ডিজাইন পরিবর্তন করতে দেয়। এটি আরও পুনঃব্যবহারযোগ্য উপাদানগুলিকে সক্ষম করে যা একটি লেআউটে স্থাপন করা হলে উপলব্ধ স্থানের উপর ভিত্তি করে নিজেকে সংশোধন করতে পারে। রেসপন্সিভ ডিজাইনের ধারণা যতদিন বিদ্যমান ছিল ততদিন তারা মোস্ট ওয়ান্টেড ফিচারের তালিকার শীর্ষে রয়েছে।

• ফেব্রুয়ারী 2023 এ নতুনভাবে উপলব্ধ।
• আগস্ট 2025 এ ব্যাপকভাবে উপলব্ধ।

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

:has() নির্বাচক

:has() নির্বাচক আমাদেরকে এমন কিছু দেয় যা বহু বছর ধরে বিকাশকারীদের থেকে আরেকটি শীর্ষ অনুরোধ—একজন অভিভাবক নির্বাচক, এটির ভিতরে যা আছে তার উপর ভিত্তি করে একটি উপাদান নির্বাচন করার একটি উপায়৷ যদিও :has() এর চেয়ে অনেক বেশি হতে পারে।

কন্টেইনার কোয়েরির মতো, এটি পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করার সময় অবিশ্বাস্যভাবে কার্যকর, কারণ আপনি একটি একক উপাদান তৈরি করতে পারেন যা এতে যা আছে তার সাথে খাপ খাইয়ে নিতে পারে।

• 2023 সালের ডিসেম্বরে নতুনভাবে উপলব্ধ।
• 2026 সালের জুনে ব্যাপকভাবে উপলব্ধ।

MDN-এ :has() সম্পর্কে আরও জানুন, :has() ফ্যামিলি সিলেক্টরে এবং :has() কেস স্টাডিতে ।

CSS গ্রিড লেআউট সাবগ্রিড

সাবগ্রিড একটি নেস্টেড গ্রিড লেআউটের জন্য তার পিতামাতার কাছ থেকে ট্র্যাকগুলিকে উত্তরাধিকারী করার ক্ষমতা সক্ষম করে৷ এটি নেস্টেড গ্রিডের মধ্যে আইটেমগুলির আরও ভাল প্রান্তিককরণের অনুমতি দেয়।

• 2023 সালের ডিসেম্বরে নতুনভাবে উপলব্ধ।
• 2026 সালের জুনে ব্যাপকভাবে উপলব্ধ।

MDN এবং CSS সাবগ্রিডে সাবগ্রিড সম্পর্কে আরও জানুন যা প্রচুর পরিমাণে অন্যান্য সংস্থানগুলির সাথে লিঙ্ক করে৷

CSS নেস্টিং

সাম্প্রতিক বছরগুলিতে CSS Sass এর মতো প্রিপ্রসেসরে ব্যবহৃত বৈশিষ্ট্যগুলি থেকে অনুপ্রেরণা নিয়েছে। উদাহরণ স্বরূপ, CSS কাস্টম প্রপার্টি, যা প্রায়ই CSS ভেরিয়েবল নামে পরিচিত, একটি ব্যাপকভাবে উপলব্ধ বৈশিষ্ট্য যা রঙের মতো ভেরিয়েবলগুলিকে এক জায়গায় সেট করা এবং আপনার CSS জুড়ে ব্যবহার করার অনুমতি দেয়, যা আগে শুধুমাত্র একটি প্রিপ্রসেসর ব্যবহার করার সময় উপলব্ধ ছিল।

প্রিপ্রসেসরের আরেকটি বৈশিষ্ট্য হল নেস্টিং। নেস্টিং নির্বাচকদের পুনরাবৃত্তি এড়াতে সাহায্য করে এবং CSS-এর পঠনযোগ্যতাকে সহায়তা করে, কারণ সম্পর্কিত জিনিসগুলি আরও সহজে একত্রিত করা যেতে পারে।

• আগস্ট 2023 এ নতুনভাবে উপলব্ধ
• ফেব্রুয়ারী 2026 এ ব্যাপকভাবে উপলব্ধ

MDN এবং CSS নেস্টিং-এ CSS নেস্টিং সম্পর্কে আরও জানুন।

HTML <search> উপাদান

অনুসন্ধান এমন কিছু যা অনেক সাইট এবং অ্যাপ্লিকেশনগুলিতে প্রদর্শিত হয়, তবে সম্প্রতি পর্যন্ত কোনও পৃষ্ঠায় অনুসন্ধান বা ফিল্টার করার জন্য ব্যবহৃত কার্যকারিতা চিহ্নিত করার জন্য কোনও উপাদান ছিল না। <search> উপাদানটি এই উদ্দেশ্যে ডিজাইন করা হয়েছে। এটি একটি উপাদান হিসাবে বিদ্যমান যার ভিতরে আপনি একটি অনুসন্ধান ফর্ম বা অন্যান্য উপাদানগুলি ফিল্টারিং ফলাফলের জন্য ব্যবহার করতে পারেন৷

• 2023 সালের অক্টোবরে নতুনভাবে উপলব্ধ
• এপ্রিল 2026 এ ব্যাপকভাবে উপলব্ধ

MDN-এ <search> উপাদান সম্পর্কে আরও জানুন।

প্রতিক্রিয়াশীল ভিডিও

এই বৈশিষ্ট্যটি বিভিন্ন ডিভাইসে উপযুক্ত আকারের ভিডিও পরিবেশন করার জন্য একটি <video> উপাদানের ভিতরে <source> উপাদান ব্যবহার করার ক্ষমতা বোঝায় যেভাবে আপনি বিভিন্ন আকারের ছবি পরিবেশন করতে পারেন।

• 2023 সালের নভেম্বরে নতুনভাবে উপলব্ধ
• 2026 সালের মে মাসে ব্যাপকভাবে উপলব্ধ

মিডিয়া বা ইমেজ সোর্স এলিমেন্টে MDN সম্পর্কে আরও জানুন এবং কিভাবে রেসপন্সিভ ভিডিও ব্যবহার করবেন ।

inert বৈশিষ্ট্য

যখন একটি উপাদান জড় হয়, তখন এটির সাথে মিথস্ক্রিয়া করা যায় না। উদাহরণস্বরূপ, একটি ডায়ালগ উইন্ডো খোলার সময় ডায়ালগের পিছনের পৃষ্ঠায় থাকা উপাদানগুলিতে ক্লিক বা ট্যাব করা যাবে না। জড় বৈশিষ্ট্য আপনাকে আপনার UI এর যেকোনো অংশে জড়তা নিয়ন্ত্রণ করার একটি উপায় দেয়।

একটি উপাদানে inert বৈশিষ্ট্য প্রয়োগ করা হলে, উপাদানটিতে ক্লিক করা হলে ক্লিক ইভেন্টগুলিকে বহিস্কার করা হবে না, উপাদানটি ফোকাস অর্জন করতে পারে না, উপাদান এবং এর বিষয়বস্তু সহায়ক প্রযুক্তিগুলি থেকে লুকিয়ে থাকে কারণ এটি অ্যাক্সেসিবিলিটি ট্রি থেকে বাদ দেওয়া হয়৷

• 2023 সালের এপ্রিলে নতুনভাবে উপলব্ধ
• অক্টোবর 2025 এ ব্যাপকভাবে উপলব্ধ

MDN-এ জড় সম্পর্কে আরও জানুন, এবং এছাড়াও জড় বৈশিষ্ট্যে ।

color-mix() ফাংশন

color-mix() ফাংশন একটি রঙের সাথে অন্য রঙের মিশ্রণকে সক্ষম করে, যেকোন উপলব্ধ রঙের স্থানগুলিতে, এর মধ্যে রয়েছে সমস্ত নতুন রঙের মডেল—এলসিএইচ, ল্যাব, ওকেএলসিএইচ এবং ওকেল্যাব—যা সম্প্রতি নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে উঠেছে।

• 2023 সালের এপ্রিলে নতুনভাবে উপলব্ধ
• অক্টোবর 2025 এ ব্যাপকভাবে উপলব্ধ

MDN-এ color-mix() এবং CSS কালার-মিক্স() সম্পর্কে আরও জানুন। আমাদের কাছে একটি বিশাল হাই ডেফিনিশন CSS কালার গাইড রয়েছে যা CSS-এ উপলব্ধ সমস্ত নতুন রঙের মডেলকে কভার করে। এছাড়াও, এই নতুন রংগুলির সাথে খেলতে এবং সুন্দর গ্রেডিয়েন্ট তৈরি করতে gradient.style দেখুন।

:user-valid এবং :user-invalid

ছদ্ম-শ্রেণি :valid এবং :invalid ব্রাউজারে ব্যাপকভাবে পাওয়া যায় এবং তারা নির্দেশ করে যে একটি ফর্ম উপাদান বর্তমানে এটির উপর স্থাপিত কোনো সীমাবদ্ধতার নিয়ম অনুসারে বৈধ, নাকি অবৈধ। অতএব, আপনার যদি ইমেলের প্রকারের একটি ক্ষেত্র থাকে এবং এতে একটি নাম থাকে, তাহলে :invalid pseudo-class এটি নির্বাচন করে এবং আপনি একটি রঙ বা আইকন যোগ করতে পারেন যাতে এটি সংশোধন করা প্রয়োজন।

:valid এবং :invalid ছদ্ম-শ্রেণির সমস্যা হল যে ব্যবহারকারী একটি ফর্মের সাথে ইন্টারঅ্যাক্ট করার আগে তারা আবেদন করে। অতএব, যদি একটি ফর্ম উপাদান প্রয়োজন হয় এবং ব্যবহারকারী এখনও এটি সম্পূর্ণ না করে থাকেন, তাহলে আপনার অবৈধ স্টাইলিং দেখাবে৷ সাধারণত আপনি শুধুমাত্র একবার অবৈধ স্টাইলিং দেখাতে চান যখন একজন ব্যবহারকারী ভুলভাবে কিছু প্রবেশ করেন বা একটি ক্ষেত্রের উপর এড়িয়ে যান এবং এটি ফাঁকা রাখেন।

এই পরিস্থিতিতে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, :user-valid এবং :user-invalid pseudo-class ব্যবহার করুন। এগুলি মোটামুটি একইভাবে আচরণ করে, ব্যতীত এগুলি শুধুমাত্র একবার মেলে যখন একজন ব্যবহারকারী ফিল্ডের সাথে ইন্টারঅ্যাক্ট করে। সুতরাং, একটি প্রয়োজনীয় ক্ষেত্রের উদাহরণে, ব্যবহারকারীকে ট্যাব বা ফিল্ডে ক্লিক করতে হবে এবং তারপরে অবৈধ অবস্থা দেখানোর জন্য ক্ষেত্রটি সম্পূর্ণ না করেই সরে যেতে হবে।

• 2023 সালের অক্টোবরে নতুনভাবে উপলব্ধ
• এপ্রিল 2026 এ ব্যাপকভাবে উপলব্ধ

MDN-এ :user-valid এবং :user-invalid সম্পর্কে আরও জানুন।

কম্প্রেশন স্ট্রীম

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

• 2023 সালের মে মাসে নতুনভাবে উপলব্ধ
• 2025 সালের নভেম্বরে ব্যাপকভাবে উপলব্ধ

MDN-এ কম্প্রেশন স্ট্রীম API সম্পর্কে আরও জানুন এবং কম্প্রেশন স্ট্রীম এখন সব ব্রাউজারে সমর্থিত ।

ঘোষণামূলক ছায়া DOM

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

• ফেব্রুয়ারী 2024 এ নতুনভাবে উপলব্ধ
• আগস্ট 2026 এ ব্যাপকভাবে উপলব্ধ

ঘোষণামূলক ছায়া DOM সম্পর্কে আরও জানুন।

Popover API

আমাদের ওয়েব অ্যাপ্লিকেশনে বিভিন্ন কাজের জন্য পপআপ ব্যবহার করা হয়। উদাহরণস্বরূপ, মেনু, কাস্টম টোস্ট বিজ্ঞপ্তি এবং সামগ্রী বাছাইকারী। দ্য পপওভার এপিআই-এর সাহায্যে এই পপআপগুলিকে আলংকারিক উপায়ে তৈরি করার একটি অন্তর্নির্মিত উপায় রয়েছে৷

• এপ্রিল 2024 এ নতুনভাবে উপলব্ধ
• অক্টোবর 2026 এ ব্যাপকভাবে উপলব্ধ

MDN-এ Popover API সম্পর্কে আরও জানুন, Popover API ল্যান্ড বেসলাইনে এবং Popover কেস স্টাডিতে ।

এই 12টি বৈশিষ্ট্য হল এমন কিছু জিনিস যা নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে উঠেছে এবং আপনি এই সাইটে আরও আবিষ্কার করতে পারেন। বেসলাইন 2023- এর অংশ হয়ে ওঠা সমস্ত বৈশিষ্ট্য এবং বেসলাইন 2024- এর অংশ হওয়া বৈশিষ্ট্যগুলির ক্রমবর্ধমান সংগ্রহ আবিষ্কার করুন৷