ওয়েবে নতুন কি

Rachel Andrew

প্রকাশিত: ২০ মে, ২০২৫

Google I/O 2025-এর 'What's new in web' মূল বক্তব্যে বেসলাইন সম্পর্কিত সমস্ত ঘোষণা তুলে ধরা হয় এবং এই বছর বেসলাইনের অংশ হয়ে ওঠা কয়েকটি ফিচারের উপরও আলোকপাত করা হয়। ওয়েব এবং বেসলাইনের জন্য এটি একটি অসাধারণ বছর ছিল। এই পোস্টে উল্লিখিত সমস্ত কিছুর একটি সারসংক্ষেপ দেওয়া হয়েছে এবং আরও বিস্তারিত জানার জন্য প্রয়োজনীয় লিঙ্কগুলোও এখানে রয়েছে।

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড এবং ওয়েব-বৈশিষ্ট্য

২০২৪ সালে আমরা ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ডের প্রাথমিক সূচনা ঘোষণা করেছি, যা ওয়েব-ফিচার ডেটা সেট ব্যবহার করে আপনাকে বেসলাইনের অন্তর্ভুক্ত সমস্ত ফিচার অন্বেষণ করার সুযোগ দেয়।

ওয়েব-ফিচার ডেটা এখন সম্পূর্ণ, এবং প্ল্যাটফর্মের সমস্ত ফিচার ম্যাপ করা হয়েছে। প্রতি মাসে বেসলাইনে নতুন ফিচার যুক্ত হওয়ার সাথে সাথে ডেটা আপডেট করা হয়, এবং এই সবকিছু ড্যাশবোর্ডে প্রদর্শিত হয়।

আপনার নিজস্ব বেসলাইন লক্ষ্য খুঁজে পেতে সহায়ক সরঞ্জাম

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

গত বছর I/O-তে আমরা ঘোষণা করেছিলাম যে RUMvision তাদের পণ্যে Baseline অন্তর্ভুক্ত করবে, এবং এই ইন্টিগ্রেশনটি এখন চালু হয়েছে।

যেহেতু এটি আপনার RUM ডেটা ব্যবহার করে, তাই এটি আপনাকে বৈশ্বিক গড়ের পরিবর্তে সেই ডেটার উপর ভিত্তি করে কোন বেসলাইন বছরটি গ্রহণ করতে হবে তা শনাক্ত করতে সাহায্য করে। এটি আপনাকে এটাও দেখতে সাহায্য করতে পারে যে ‘বেসলাইন ওয়াইডলি অ্যাভেইলেবল’ আপনার জন্য যুক্তিযুক্ত কিনা।

নতুন গুগল অ্যানালিটিক্স বেসলাইন চেকার ব্যবহার করে আপনি আপনার গুগল অ্যানালিটিক্স ডেটা থেকে স্পষ্টভাবে দেখতে পারেন যে, আপনার ব্যবহারকারীদের কত শতাংশ প্রতিটি বেসলাইন লক্ষ্যকে সমর্থন করে।

এগুলো ক্রমবর্ধমান এমন সব টুলের মধ্যে মাত্র দুটি, যা আপনাকে আপনার প্রকৃত ব্যবহারকারীর ডেটাকে বেসলাইনের সাথে ম্যাপ করতে সাহায্য করে।

ওয়েব ডিএক্স কমিউনিটি গ্রুপ সম্প্রতি নেটলিফাই-এর জন্য একটি এক্সটেনশন চালু করেছে, যা আপনার সাইটগুলিতে বিভিন্ন বেসলাইন বছর এবং ব্যাপকভাবে উপলব্ধ ডেটার সাপোর্ট দেখায়, যাতে আপনি আপনার বিল্ড টুলগুলিতে কী টার্গেট করবেন তা ঠিক করতে পারেন। শীঘ্রই ক্লাউডফ্লেয়ারের অবজারভেটরি RUM প্রোডাক্ট এবং কন্টেন্টস্কয়ারের সাথে ইন্টিগ্রেশন আসছে।

আপনার নিজস্ব টুলগুলির সাথে ডেটা একীভূত করুন।

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

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড এপিআই ব্যবহার করুন, অথবা সরাসরি এনপিএম প্যাকেজ থেকে ওয়েব-ফিচার ডেটা গ্রহণ করুন।

এখন আপনি W3C WebDX কমিউনিটি গ্রুপের baseline-browser-mapping মডিউলটি ব্যবহার করে ব্রাউজার সংস্করণগুলোকে একটি বেসলাইন টার্গেটের সাথে ম্যাপ করতে পারেন। এই মডিউলটি সার্ভার-সাইড জাভাস্ক্রিপ্ট পরিবেশে ব্যবহার করা যায়, অথবা রিপোজিটরি থেকে প্রতিদিন রিফ্রেশ হওয়া JSON বা CSV ফাইল ডাউনলোড করেও ব্যবহার করা যায়।

এই ডেটাতে শুধু মূল বেসলাইন ব্রাউজার সেটের জন্যই নয়, বরং স্যামসাং ইন্টারনেট, অপেরা, ইউসি ব্রাউজার এবং অ্যান্ড্রয়েড ওয়েবভিউ-এর মতো ডাউনস্ট্রিম ব্রাউজারগুলোর জন্যও ম্যাপিং অন্তর্ভুক্ত রয়েছে।

আপনার বেসলাইন টার্গেট দ্বারা ফিচারগুলো সমর্থিত কিনা তা জানুন।

বেসলাইন তথ্য এখন বেশিরভাগ MDN এবং Can I Use পেজে রয়েছে, এটি ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ডে এবং web.dev ও CSS Tricks-এর আর্টিকেলগুলোতেও পাওয়া যায়। তবে, এই সবকিছুর জন্য আপনাকে সাপোর্ট খুঁজে বের করতে হবে। কোড করার সময় আপনার IDE-তে এবং আপনার ব্যবহৃত অন্যান্য সমস্ত টুলের অংশ হিসেবে বেসলাইন তথ্য দেখানো হলে তা আরও অনেক বেশি সুবিধাজনক হতো।

আমরা আনন্দের সাথে জানাচ্ছি যে, অনেক গুরুত্বপূর্ণ টুলে এখন বেসলাইন সাপোর্ট অন্তর্নির্মিত রয়েছে, অথবা সহজেই ইন্টিগ্রেট করা যায়।

browserslist-config-baseline

Babel এবং PostCSS-এর মতো অনেক টুল কোন কোন ব্রাউজারকে সাপোর্ট করবে তা নির্ধারণ করতে browserslist ব্যবহার করে।

WebDX CG এবং কমিউনিটির সদস্যদের সাথে মিলে ক্রোম টিম browserslist-config-baseline নামক একটি নতুন টুল প্রকাশ করতে সাহায্য করেছে। এটি আপনাকে আপনার browserslist টার্গেটগুলোকে বেসলাইন টার্ম অনুযায়ী, যেমন ব্যাপকভাবে উপলব্ধ (widely available) বা বেসলাইন বছর (Baseline years) অনুসারে কনফিগার করতে দেয়।

এর ফলে, ব্রাউজারলিস্ট টার্গেট গ্রহণকারী যেকোনো টুলকে এখন বেসলাইনের মাধ্যমে প্রকাশ করা যাবে।

browserslist-এর সাথে Baseline-এর ব্যবহার সম্পর্কে আরও জানুন।

লিন্টারগুলিতে বেসলাইন—ESLint এবং Stylelint

লিন্টার জগতে কয়েকটি নতুন টুলের আগমনের ফলে সম্প্রতি লিন্টারের সাথে বেসলাইন ব্যবহার করা সম্ভব হয়েছে, যার শুরুটা হয়েছে CSS-এর জন্য ESLint-এর মাধ্যমে।

বেসলাইন ESLint-এর একটি use-baseline রুল আছে। আপনি এটিকে আপনার পছন্দের বেসলাইন টার্গেটে সেট করতে পারেন, এবং এটি আপনার টার্গেটের চেয়ে নতুন কোনো ফিচার ব্যবহার করার সময় আপনাকে সতর্ক করবে। আপনি সেই সতর্কবার্তাগুলো কীভাবে সমাধান করবেন তা বেছে নিতে পারেন: হয় সেই ফিচারটিকে প্রিমিটিভ দিয়ে প্রতিস্থাপন করে, অথবা লিন্টারের সতর্কবার্তাটি দমন করে। দমন করা একটি সম্পূর্ণ বৈধ সমাধান, যখন আপনি জানেন যে আপনি নিরাপদে একটি অত্যাধুনিক ফিচার ব্যবহার করছেন, উদাহরণস্বরূপ যদি এটি একটি প্রগ্রেসিভ এনহ্যান্সমেন্ট হয়।

ডিফল্টরূপে, @supports ব্লকের মধ্যে নতুন ফিচার ব্যবহার করা হলে ESLint সতর্ক করে না, কারণ অসমর্থিত ব্রাউজারগুলো এমনিতেও সেগুলোকে মূল্যায়ন করে না।

আপনার এইচটিএমএল লিন্টিংয়ের প্রয়োজনে html-eslint নামে একটি কমিউনিটি প্লাগইনও রয়েছে।

স্টাইললিন্ট আনুষ্ঠানিকভাবে stylelint-plugin-use-baseline নামের একটি প্লাগইন সমর্থন করে। এই নিয়মটি CSS-এর জন্য ব্যবহৃত ESLint নিয়মের মতোই কাজ করে, কিন্তু এটি স্টাইললিন্টে চলে।

অনেক লিন্টারের IDE প্লাগইনও থাকে, ফলে কোডিং করার সময় আঁকাবাঁকা দাগের মাধ্যমে বেসলাইন স্ট্যাটাস সম্পর্কে তাৎক্ষণিক ধারণা পাওয়া যায়।

ভিএস কোড এবং জেটব্রেইনস ওয়েবস্টর্মে বেসলাইন

অনেক IDE-তেই দীর্ঘদিন ধরে এমন একটি সুবিধা রয়েছে, যার মাধ্যমে এডিটরের কোনো ফিচারের উপর মাউস রাখলে সমর্থিত ব্রাউজার সংস্করণগুলোর তালিকা দেখা যায়।

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

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

এখন আপনি কোনো ফিচারের উপর মাউস রাখলে তা আপনাকে জানিয়ে দেবে যে ফিচারটি বেসলাইন হিসেবে বিবেচিত হচ্ছে কিনা এবং কত সময়ের জন্য, অথবা এমন কোনো প্রধান ব্রাউজার আছে কিনা যা এখনও এটি সম্পূর্ণরূপে বাস্তবায়ন করেনি।

সমর্থিত বৈশিষ্ট্যগুলির মধ্যে রয়েছে CSS প্রোপার্টি, HTML এলিমেন্ট এবং HTML অ্যাট্রিবিউট। আরও জানতে দেখুন Visual Studio Code এখন Baseline সমর্থন করে ।

এই সমন্বয়ের ফলে ভিএস কোডের উপর ভিত্তি করে তৈরি যেকোনো আইডিই-ও এই হোভারকার্ডগুলো থেকে উপকৃত হবে।

এবং, আমরা এটাও ঘোষণা করতে পারছি যে জেটব্রেইনস তাদের ওয়েবস্টর্ম জাভাস্ক্রিপ্ট এবং টাইপস্ক্রিপ্ট আইডিই-তে হোভারকার্ড যুক্ত করছে।

ওয়েব আগের চেয়ে দ্রুত উন্নত হচ্ছে।

আমরা আশা করি যে, আন্তঃকার্যকরী ওয়েব আগের চেয়েও দ্রুত উন্নত হচ্ছে—এই সুযোগটি গ্রহণ করতে বেসলাইন আপনাকে সাহায্য করবে।

আপনি ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড ব্যবহার করে সেই সমস্ত ফিচার দেখতে পারেন যা গত বারো মাসে —অর্থাৎ গুগল আই/ও ২০২৪-এর পর থেকে—বেসলাইন হিসেবে নতুনভাবে উপলব্ধ হয়েছে।

এছাড়াও এমন অনেক ফিচার রয়েছে যা ইন্টারোপ ২০২৫ প্রজেক্টে অন্তর্ভুক্ত হওয়ায় খুব শীঘ্রই বেসলাইন নিউলি হিসেবে উপলব্ধ হবে বলে আপনি নিশ্চিত থাকতে পারেন। অন্তর্ভুক্ত সমস্ত ফিচার সম্পর্কে আপনি "ইন্টারোপ ২০২৫ : ওয়েব প্ল্যাটফর্ম উন্নতির আরও একটি বছর" (Interop2025: another year of web platform improvements ) -এ পড়তে পারেন।

পার্শ্বীয় লেখার মোড

আমরা ইতোমধ্যেই একটি ফিচারকে নতুনভাবে বেসলাইন হিসেবে উপলব্ধ হতে দেখেছি, আর তা হলো CSS writing-mode প্রপার্টির জন্য sideways-rl এবং sideways-lr ভ্যালুগুলো। আপনি যদি শুধুমাত্র লেআউটের উদ্দেশ্যে ভার্টিকাল রাইটিং মোড ব্যবহার করেন, তবে sideways ভ্যালুগুলোই সম্ভবত আপনার জন্য উপযুক্ত হবে।

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

অ্যাঙ্কর পজিশনিং

ক্রোম ১২৫-এ অ্যাঙ্কর পজিশনিং ফিচারটি যুক্ত করা হয়েছে। এর মাধ্যমে কোনো এলিমেন্টের অবস্থানকে একটি অ্যাঙ্করের সাথে যুক্ত করা যায়, যেমন—বাটন দিয়ে টুলটিপ খোলার সময়।

এটি এখন ইন্টারোপ ২০২৫-এর অন্তর্ভুক্ত, তাই আশা করা যায় এটি এ বছর বেসলাইনেও যুক্ত হবে।

কোর ওয়েব ভাইটালস: এলসিপি এবং আইএনপি

এলসিপি এপিআই

ইভেন্ট টাইমিং এপিআই (আইএনপি-এর জন্য)

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

ইন্টারোপ ২০২৫ বিভিন্ন ব্রাউজারে LargestContentfulPaint API এবং Event Timing API প্রয়োগের মাধ্যমে Largest Contentful Paint (LCP) এবং Interaction to Next Paint (INP) মেট্রিক অন্তর্ভুক্ত করে।

<details> এলিমেন্টের উন্নতিসাধন

<details> এলিমেন্টটি ইতিমধ্যেই বেসলাইন হিসেবে ব্যাপকভাবে উপলব্ধ। এটিকে ইন্টারঅপ ২০২৫-এ অন্তর্ভুক্ত করা হয়েছে, কারণ এতে এমন বেশ কিছু ফিচার রয়েছে যা <details> যুক্ত ডিসক্লোজার উইজেটগুলোকে আরও বেশি কার্যকর করে তোলে।

<details> এলিমেন্টের মধ্যে একটি <summary> এলিমেন্ট থাকে, যা <details> এলিমেন্টটি সংকুচিত (collapsed) অবস্থায় পেজে দৃশ্যমান থাকে। <summary> এর বাইরে <details> এলিমেন্টের কন্টেন্ট থাকে, যা ব্যবহারকারী সামারিতে ক্লিক না করা পর্যন্ত লুকানো থাকে।

ইন্টারঅপ ২০২৫ চলাকালীন যে বিষয়গুলোকে আন্তঃকার্যকরী করা হচ্ছে, তার মধ্যে একটি হলো display -এর পরিবর্তে content-visibility ব্যবহার করে কন্টেন্ট লুকিয়ে ফেলা। এর মানে হলো, যদি কন্টেন্টটি প্রসারিত না করা হয়, তবে তা মোটেও রেন্ডার হবে না।

ইন্টারোপ ২০২৫-এর কাজের একটি অংশ হলো ::marker সিউডো-এলিমেন্ট। এই ::marker সিউডো-এলিমেন্টটি আপনাকে <summary> এলিমেন্টের ডিসক্লোজার ট্রায়াঙ্গেলকে স্টাইল করার সুযোগ দেয়।

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

তারপর, আরেকটি ছদ্ম-উপাদান— ::details-content ।

::details-content হলো কন্টেন্ট—details এলিমেন্টের সেই অংশ যা প্রসারিত ও সংকুচিত হয় এবং যাকে স্টাইল করার সুবিধা দেয়।

[open]::details-content {
  border: 5px dashed hotpink;
}

এছাড়াও কিছু চমৎকার উন্নতি করা হয়েছে, যেমন <details> ফাইন্ড-ইন-পেজ’ সার্চের মাধ্যমে কোনো এলিমেন্ট খুঁজে পেলে তা স্বয়ংক্রিয়ভাবে প্রসারিত হওয়া, এবং HTML-এর hidden অ্যাট্রিবিউটের ‘ until-found ফাউন্ড’ ভ্যালুটিকে বেসলাইনে নিয়ে আসা। এটি এখন নতুনভাবে উপলব্ধ। এই ভ্যালুটি কোনো এলিমেন্টকে ততক্ষণ পর্যন্ত লুকিয়ে রাখে, যতক্ষণ না ব্রাউজারের ‘ফাইন্ড-ইন-পেজ’ সার্চ ব্যবহার করে সেটিকে খুঁজে পাওয়া যায় অথবা কোনো URL ফ্র্যাগমেন্ট অনুসরণ করে সরাসরি সেখানে যাওয়া হয়।

CSS @scope

CSS-এর @scope রুলটি আপনার সিলেক্টরগুলোর পরিধি সীমিত করতে সাহায্য করে। @scope ব্যবহার করে একটি স্কোপিং রুট সেট করার মাধ্যমে, সেই অ্যাট-রুলটির ভেতরে থাকা যেকোনো স্টাইল রুল শুধুমাত্র সেই DOM ট্রি-তেই প্রযোজ্য হয়।

উদাহরণস্বরূপ, যদি আপনি .card ক্লাসযুক্ত কোনো এলিমেন্টের ভেতরে থাকা শুধুমাত্র <img> এলিমেন্টগুলোকে টার্গেট করতে চান, তাহলে .card স্কোপিং রুট হয়ে যাবে।

@scope (.card) {
    img {
        border-color: green;
    }
}

CSS @scope at-rule ব্যবহার করে আপনার সিলেক্টরের পরিধি সীমিত করার বিষয়ে আরও জানুন।

scrollend

আরেকটি বৈশিষ্ট্য যা জটিলতা কমায় এবং স্ক্রলিং ইন্টারফেস উন্নত করে, তা হলো scrollend । scrollend ইভেন্টটি ছাড়া, স্ক্রল সম্পূর্ণ হয়েছে কিনা তা শনাক্ত করার কোনো নির্ভরযোগ্য উপায় নেই।

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend ইভেন্টের মাধ্যমে ব্রাউজার আপনার হয়ে এই সমস্ত কঠিন মূল্যায়ন করে দেয়।

document.onscrollend = event => {…}

নতুন জাভাস্ক্রিপ্ট ইভেন্ট Scrollend- এ আরও উদাহরণ দেখুন।

একই-ডকুমেন্ট ভিউ ট্রানজিশন

সবশেষে, তবে অবশ্যই গুরুত্বপূর্ণ, ভিউ ট্রানজিশন হলো ইন্টারঅপ ২০২৫-এর একটি অংশ। এই কাজের মধ্যে একই ডকুমেন্টের ভিউ ট্রানজিশন, অর্থাৎ সিঙ্গেল-পেজ-অ্যাপের জন্য ভিউ ট্রানজিশন এবং ভিউ ট্রানজিশন ক্লাস অন্তর্ভুক্ত রয়েছে।

বছর এগোনোর সাথে সাথে প্রকল্পটি কীভাবে রূপ নিচ্ছে তা দেখতে ইন্টারোপ ২০২৫ ড্যাশবোর্ডটি অনুসরণ করুন।

ইন্টারোপ ২০২৫-এ অন্তর্ভুক্ত ফিচারগুলোই যে এই বছর বেসলাইনের অংশ হবে, তা নয়, কিন্তু প্রকল্পগুলোতে এগুলোর অন্তর্ভুক্তি একটি বেশ ভালো ইঙ্গিত দেয় যে এগুলোকে অগ্রাধিকার দেওয়া হচ্ছে এবং এগুলো শীঘ্রই আসছে।

আমরা সবে শুরু করছি।

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

web.dev-এর উপর নজর রাখুন, কারণ আমরা নতুন নতুন টুলস সম্পর্কিত ঘোষণার পাশাপাশি এমন সব টিউটোরিয়াল প্রকাশ করতে থাকব যা আপনাকে ওয়েবের সমস্ত সুযোগের সদ্ব্যবহার করতে সাহায্য করবে।