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

Rachel Andrew

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

গুগল আই/ও ২০২৫-এ ওয়েবে নতুন কীনোট বেসলাইনের সমস্ত ঘোষণা শেয়ার করেছে, সেই সাথে এই বছর বেসলাইনের অংশ হয়ে ওঠা কিছু বৈশিষ্ট্যের উপর এক নজর দিয়েছে। ওয়েবের জন্য এটি একটি অসাধারণ বছর ছিল, এবং বেসলাইনের জন্য, এই পোস্টটি উল্লেখিত সমস্ত কিছুর একটি সংক্ষিপ্তসার, আরও জানতে সমস্ত লিঙ্ক সহ।

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

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

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

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

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

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

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

নতুন Google Analytics Baseline Checker এর সাহায্যে আপনার ব্যবহারকারীদের কত শতাংশ প্রতিটি Baseline টার্গেট সমর্থন করে তা স্পষ্টভাবে দেখতে আপনি আপনার Google Analytics ডেটা ব্যবহার করতে পারেন।

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

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

আপনার নিজস্ব সরঞ্জামগুলির সাহায্যে ডেটা একীভূত করুন

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

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড API ব্যবহার করুন, অথবা npm প্যাকেজ থেকে সরাসরি ওয়েব-বৈশিষ্ট্যের ডেটা ব্যবহার করুন।

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

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

আপনার বেসলাইন টার্গেট দ্বারা বৈশিষ্ট্যগুলি সমর্থিত কিনা তা জানুন

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

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

browserslist-config-baseline

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

WebDX CG এবং কমিউনিটির সদস্যদের সাথে একসাথে, Chrome টিম browserslist-config-baseline নামে একটি নতুন টুল প্রকাশ করতে সাহায্য করেছে। এটি আপনাকে আপনার ব্রাউজারলিস্ট লক্ষ্যগুলিকে বেসলাইন পদগুলিতে কনফিগার করতে দেয় যেমন ব্যাপকভাবে উপলব্ধ বা বেসলাইন বছর।

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

ব্রাউজারলিস্টের সাথে বেসলাইন ব্যবহার করুন বিভাগে আরও জানুন।

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

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

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

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

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

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

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

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

অনেক IDE দীর্ঘদিন ধরে আপনার এডিটরের একটি বৈশিষ্ট্যের উপর কার্সার রেখে সমর্থিত ব্রাউজার সংস্করণের তালিকা দেখার একটি উপায় সমর্থন করে আসছে।

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

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

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

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

এই ইন্টিগ্রেশনের অর্থ হল VS কোড ভিত্তিক যেকোনো IDE এই হোভারকার্ডগুলি থেকে উপকৃত হবে।

এবং, আমরা আরও ঘোষণা করতে পারছি যে JetBrains তাদের WebStorm JavaScript এবং TypeScript IDE-তে হোভারকার্ড প্রয়োগ করছে।

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

আমরা আশা করি বেসলাইন আপনাকে এই সত্যের সুবিধা নিতে সাহায্য করবে যে ইন্টারঅপারেবল ওয়েব আগের চেয়ে দ্রুত উন্নতি করছে।

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

ইন্টারপ ২০২৫ প্রকল্পে অন্তর্ভুক্ত হওয়ার সাথে সাথে খুব শীঘ্রই বেসলাইন নতুনভাবে উপলব্ধ হবে বলে আপনি নিশ্চিত হতে পারেন এমন বেশ কিছু বৈশিষ্ট্য রয়েছে। ইন্টারপ২০২৫-এ অন্তর্ভুক্ত সমস্ত বৈশিষ্ট্য সম্পর্কে আপনি পড়তে পারেন: ওয়েব প্ল্যাটফর্মের উন্নতির আরও একটি বছর ।

পাশে লেখার মোড

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

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

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

Chrome 125-এ অ্যাঙ্কর পজিশনিং পাঠানো হয়েছে। এটি আপনাকে একটি উপাদানের অবস্থানকে একটি অ্যাঙ্করের সাথে সংযুক্ত করার একটি উপায় দেয়, উদাহরণস্বরূপ যখন একটি বোতাম দিয়ে একটি টুলটিপ খোলা হয়।

এটি এখন ইন্টারপ ২০২৫-এ অন্তর্ভুক্ত, তাই আমাদের এই বছর এটি বেসলাইনে যোগদান করা উচিত।

কোর ওয়েব ভাইটালস: LCP এবং INP

এলসিপি এপিআই

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

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

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

<details> এলিমেন্টের বর্ধিতকরণ

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

<details> এলিমেন্টে একটি <summary> এলিমেন্ট থাকে যা পৃষ্ঠায় দৃশ্যমান অংশ যখন <details> এলিমেন্টটি আড়াল করা হয়। <summary> এর বাইরে <details> এলিমেন্টের কন্টেন্ট থাকে, ব্যবহারকারী যতক্ষণ না summary এ ক্লিক করেন ততক্ষণ পর্যন্ত এটি লুকানো থাকে।

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

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

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

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

::details-content কন্টেন্টকে প্রতিনিধিত্ব করে—বিস্তারিত উপাদানের সেই অংশ যা প্রসারিত এবং ভেঙে যায়, এবং আপনাকে এটিকে স্টাইল করতে দেয়।

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

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

সিএসএস @scope

CSS @scope নিয়ম আপনাকে আপনার নির্বাচকদের নাগালের মধ্যে সীমাবদ্ধ করতে দেয়। @scope দিয়ে একটি স্কোপিং রুট সেট করে, at-rule-এর ভিতরে নেস্ট করা যেকোনো স্টাইল নিয়ম শুধুমাত্র সেই 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 => {…}

Scrolend, একটি নতুন JavaScript ইভেন্টে আরও উদাহরণ দেখুন।

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

সবশেষে কিন্তু নিশ্চিতভাবেই কম গুরুত্বপূর্ণ নয়, ভিউ ট্রানজিশনগুলি ইন্টারপ ২০২৫-এর অংশ। এই কাজে একই-ডকুমেন্ট ভিউ ট্রানজিশন জড়িত, যেমন একক-পৃষ্ঠা-অ্যাপ এবং ভিউ ট্রানজিশন ক্লাসের জন্য।

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

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

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

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

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