এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ইন্টারপ 2025: ওয়েব প্ল্যাটফর্মের উন্নতির আরেকটি বছর

Rachel Andrew

প্রকাশিত: ফেব্রুয়ারি 13, 2025

ইন্টারপ 2024-এর বিশাল সাফল্যের পর, প্রকল্পটি 2025-এর জন্য একটি নতুন ফোকাস এলাকা নিয়ে আজ ফিরে এসেছে। যদিও আমরা এই বছর করা প্রতিটি পরামর্শ অন্তর্ভুক্ত করতে পারিনি, চূড়ান্ত তালিকাটি ওয়েব প্ল্যাটফর্ম জুড়ে পৌঁছেছে—CSS থেকে পারফরম্যান্স-সম্পর্কিত বৈশিষ্ট্য পর্যন্ত।

2025 এর জন্য ফোকাস এলাকা

অ্যাঙ্কর পজিশনিং
backdrop-filter
কোর ওয়েব ভাইটাল
<details> উপাদান
লেআউট
মডিউল
নেভিগেশন API
পয়েন্টার এবং মাউস ইভেন্ট
মিউটেশন ইভেন্টগুলি সরান
@scope
scrollend ইভেন্ট
স্টোরেজ অ্যাক্সেস API
text-decoration
URLPattern
ট্রানজিশন API দেখুন
ওয়েব অ্যাসেম্বলি
ওয়েব কম্প্যাট
ওয়েবআরটিসি
লেখার মোড

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

অ্যাক্সেসিবিলিটি পরীক্ষা
গেমপ্যাড এপিআই টেস্টিং
মোবাইল টেস্টিং
গোপনীয়তা পরীক্ষা
ওয়েবভিটিটি

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

আপনি ইন্টারপ 2025 ড্যাশবোর্ডে wpt.fyi/interop-2025- এ অনুসরণ করতে পারেন এবং জিনিসগুলি বেসলাইন নতুনভাবে উপলব্ধ হওয়ার সাথে সাথে সেগুলি webstatus.dev-এ বেসলাইন 2025 তালিকাতেও দেখাবে৷

প্রকল্পের শুরুতে স্কোরগুলি—ইন্টারপ:33, ইনভেস্টিগেশনস:0, ক্রোম ক্যানারি:91, এজ ডেভ:88, ফায়ারফক্স নাইটলি:52, সাফারি টেকনোলজি প্রিভিউ:55। — ইন্টারপ 2025 ড্যাশবোর্ড (13 ফেব্রুয়ারি, 2025 অনুযায়ী)।

CSS এবং UI

ইন্টারপ 2025-এ অন্তর্ভুক্ত বেশ কয়েকটি বৈশিষ্ট্য হল যেগুলিকে আপনি CSS 2024 সমীক্ষায় গুরুত্বপূর্ণ হিসেবে চিহ্নিত করেছেন। তারা আপনাকে আরও সুন্দর এবং পারফরম্যান্স ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সাহায্য করবে।

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

Browser Support

Source

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

একটি অবস্থানগত উপাদান সহ একটি নোঙ্গর।

এই বৈশিষ্ট্যটিকে বেসলাইনের অংশ করে থার্ড-পার্টি লাইব্রেরির উপর নির্ভর না করে ইউজার ইন্টারফেস তৈরি করা আরও সহজ করে তুলবে। আমাদের অ্যাঙ্কর পজিশনিং ডকুমেন্টেশনে এবং MDN— CSS অ্যাঙ্কর পজিশনিং -এ আরও জানুন।

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

Browser Support

Source

এছাড়াও এই বছর অন্তর্ভুক্ত রয়েছে ভিউ ট্রানজিশন, বিশেষভাবে একই-ডকুমেন্ট ভিউ ট্রানজিশন এবং view-transition-class সিএসএস প্রপার্টি।

একক-পৃষ্ঠা অ্যাপ্লিকেশনের জন্য একই-নথি দৃশ্য ট্রানজিশনে এবং ভিউ ট্রানজিশনের জন্য MDN ডকুমেন্টেশনে ভিউ ট্রানজিশন সম্পর্কে আরও জানুন।

`backdrop-filter` বৈশিষ্ট্য

Browser Support

Source

2024 সালের সেপ্টেম্বর থেকে backdrop-filter প্রপার্টি নতুনভাবে পাওয়া যাচ্ছে। এটি আপনাকে আপনার সামগ্রীর পিছনে প্রভাব তৈরি করতে দেয়। উদাহরণস্বরূপ অস্পষ্ট করা বা এমন প্রভাব তৈরি করা যা আপনি শুধুমাত্র একটি গ্রাফিক্স অ্যাপ্লিকেশনে উপলব্ধ হওয়ার আশা করতে পারেন।

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

`<details>` উপাদান

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

::marker এবং ::details-content CSS ছদ্ম-উপাদান।
display পরিবর্তে বিষয়বস্তু টগল করতে content-visibility ব্যবহার করা।
<details> উপাদানটিকে স্বয়ংক্রিয়ভাবে সম্প্রসারণ করা হচ্ছে পৃষ্ঠার সাথে মিল খুঁজে পাওয়া যায়।
hidden="until-found" অ্যাট্রিবিউট, যা ব্রাউজারের ফাইন্ড-ইন-পেজ সার্চ ব্যবহার করে পাওয়া না যাওয়া পর্যন্ত একটি উপাদানকে লুকিয়ে রাখে বা এটি একটি URL খণ্ড অনুসরণ করে সরাসরি নেভিগেট করা হয়।

CSS `@scope` at-রুল

Browser Support

Source

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

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

পরবর্তী উদাহরণে, একটি ঊর্ধ্ব এবং নিম্ন সীমা ব্যবহার করা হয়। <img> উপাদানটি শুধুমাত্র তখনই নির্বাচিত হয় যদি এটি .card এর একটি শ্রেণির উপাদানের মধ্যে থাকে এবং .card__content এর একটি শ্রেণির উপাদানের বাইরে থাকে।

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

CSS @scope at-rule এবং MDN-এর @scope ডকুমেন্টেশনে আপনি কীভাবে @scope ব্যবহার করতে পারেন তার আরও উদাহরণ খুঁজুন।

`scrollend` ইভেন্ট

Browser Support

Source

scrollend ইভেন্ট ছাড়া, একটি স্ক্রল সম্পূর্ণ হয়েছে তা সনাক্ত করার কোন নির্ভরযোগ্য উপায় নেই। আপনি যা করতে পারেন তা হল setTimeout() ব্যবহার করে স্ক্রোলটি একটি সময়ের জন্য বন্ধ হয়েছে কিনা তা পরীক্ষা করা। এটি এটিকে এমন করে তোলে যেন একটি স্ক্রোল ইভেন্টকে বিরতি দিয়েছে, একটি স্ক্রোল ইভেন্ট শেষ করেছে না।

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

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

document.onscrollend = event => {
  // ...
}

স্ক্রলেন্ডে আরও উদাহরণ দেখুন, একটি নতুন জাভাস্ক্রিপ্ট ইভেন্ট এবং এছাড়াও scrollend জন্য MDN ডকুমেন্টেশনে ।

`text-decoration` সম্পত্তি

Browser Support

Source

text-decoration প্রোপার্টি হল text-decoration-line , text-decoration-color , text-decoration-style এবং text-decoration-thickness একটি সংক্ষিপ্ত হস্ত। এটিকে বেসলাইন ব্যাপকভাবে উপলব্ধ বলে মনে করা হয়, তবে Safari-এ একমাত্র উপসর্গবিহীন শর্টহ্যান্ড বৈশিষ্ট্য যা কাজ করে তা হল text-decoration-line । এটি 2025 এর সময় সম্বোধন করা হবে।

লেখার মোড

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

Browser Support

Source

উপরন্তু, লজিক্যাল CSS বৈশিষ্ট্য overflow-inline এবং overflow-block অন্তর্ভুক্ত করা হয়েছে। এগুলো লেখার মোড নির্বিশেষে বিষয়বস্তু বক্সে ওভারফ্লো হলে কী ঘটবে তা নিয়ন্ত্রণ করা সম্ভব করে।

Browser Support

Source

কোর ওয়েব ভাইটাল

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

ইন্টারপ 2025-এর মধ্যে রয়েছে Largest Contentful Paint (LCP) এবং ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিক্সের মাধ্যমে LargestContentfulPaint API এবং ইভেন্ট টাইমিং API ব্রাউজার জুড়ে। Cumulative Layout Shift (CLS) মেট্রিক সুযোগের মধ্যে নেই।

LCP API

Browser Support

Source

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

Browser Support

Source

ওয়েব অ্যাসেম্বলি (ওয়াসম)

WebAssembly API আপনাকে WebAssembly কোড লোড করতে দেয়, একটি পোর্টেবল বাইনারি নির্দেশনা বিন্যাস। এটি আপনাকে ব্রাউজারে সমস্ত সার্ভারের প্রয়োজনীয়তা সহ একটি সম্পূর্ণ ব্লগ অ্যাপ্লিকেশন চালানোর মতো জিনিসগুলি করার অনুমতি দিতে পারে!

এই বছর, কাজটি নিম্নলিখিত বৈশিষ্ট্যগুলিতে ফোকাস করবে:

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

বৈশিষ্ট্য অপসারণ

এই বছর প্রকল্প প্ল্যাটফর্ম থেকে একটি অপসারণ অন্তর্ভুক্ত. মিউটেশন ইভেন্টগুলিকে অবমূল্যায়ন করা হয় এবং অনেক বেশি পারফরম্যান্স এবং বেসলাইন ব্যাপকভাবে উপলব্ধ মিউটেশন অবজারভার API দিয়ে প্রতিস্থাপিত হয়। ক্রোম এই ইভেন্টগুলিকে Chrome 126-এ সরিয়ে দিয়েছে এবং এই ফোকাস ক্ষেত্রটি হল সেগুলিকে সমস্ত ব্রাউজার থেকে সরিয়ে দেওয়া।

ইতিহাস বুঝতে, এবং কেন এই ইভেন্টগুলি সরানো হচ্ছে, পড়ুন মিউটেশন ইভেন্টগুলি Chrome থেকে সরানো হবে ৷

আরও জানুন

বৈশিষ্ট্যের সম্পূর্ণ তালিকার বিবরণ README প্রকল্পে পাওয়া যাবে। এছাড়াও, ইন্টারপ 2025-এ কাজ করা অন্যান্য কোম্পানির পোস্টগুলি পড়ুন।

2025 এর জন্য ফোকাস এলাকা

CSS এবং UI

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

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

backdrop-filter বৈশিষ্ট্য

<details> উপাদান

CSS @scope at-রুল

scrollend ইভেন্ট

text-decoration সম্পত্তি

লেখার মোড

কোর ওয়েব ভাইটাল

LCP API

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

ওয়েব অ্যাসেম্বলি (ওয়াসম)

বৈশিষ্ট্য অপসারণ

আরও জানুন

`backdrop-filter` বৈশিষ্ট্য

`<details>` উপাদান

CSS `@scope` at-রুল

`scrollend` ইভেন্ট

`text-decoration` সম্পত্তি