ডিসেম্বরে ওয়েব প্ল্যাটফর্মে নতুন

২০২৫ সালের ডিসেম্বরে স্থিতিশীল এবং বিটা ওয়েব ব্রাউজারগুলিতে আসা কিছু আকর্ষণীয় বৈশিষ্ট্য আবিষ্কার করুন।

র‍্যাচেল অ্যান্ড্রু

প্রকাশিত: ১৬ ডিসেম্বর, ২০২৫

স্থিতিশীল ব্রাউজার রিলিজ

ডিসেম্বর মাসে Chrome 143 , Firefox 146 এবং Safari 26.2 স্থিতিশীল অবস্থায় মুক্তি পাবে। এই পোস্টে এই মাসে অনেক নতুন বৈশিষ্ট্যের উপর নজর দেওয়া হয়েছে, যার মধ্যে বেশ কিছু জিনিস নতুনভাবে উপলব্ধ হচ্ছে।

@scope CSS at-rule এখন বেসলাইন

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

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

Firefox 146 এর সাথে, এই দরকারী at-rule এখন Baseline Newly এ উপলব্ধ। CSS @scope at-rule দিয়ে আপনার নির্বাচকদের নাগালের সীমাবদ্ধতা সম্পর্কে আরও জানুন।

contrast-color() সিএসএস ফাংশন

এছাড়াও Firefox 146-এ contrast-color() ফাংশন রয়েছে। এই ফাংশনটি একটি রঙের মান নেয় এবং একটি বিপরীত রঙ প্রদান করে, যার লক্ষ্য WCAG AA ন্যূনতম বৈসাদৃশ্য নিশ্চিত করা।

আরও উদাহরণের জন্য ওয়েবকিট ব্লগে ব্রাউজারকে CSS-এ কীভাবে একটি বিপরীত রঙ বেছে নিতে বলা যায় তা দেখুন।

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • প্রান্ত: সমর্থিত নয়।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: ২৬।

Source

ফায়ারফক্স হল প্রথম ব্রাউজার যা text-decoration-inset প্রোপার্টি সরবরাহ করে। এই প্রোপার্টি আপনাকে একটি এলিমেন্টের টেক্সট ডেকোরেশনের শুরু এবং শেষ বিন্দুগুলি সামঞ্জস্য করতে দেয় যাতে এটিকে ছোট, লম্বা করা যায়, অথবা রেন্ডার করা টেক্সটের সাপেক্ষে এর অবস্থান পরিবর্তন করা যায়।

font-language-override CSS প্রোপার্টি

Chrome 143-এ font-language-override বৈশিষ্ট্য অন্তর্ভুক্ত রয়েছে। এটি আপনাকে একটি নির্দিষ্ট ভাষার জন্য টাইপফেস আচরণকে ওভাররাইড করতে দেয়। এটি কার্যকর যদি আপনি এমন টাইপফেস ব্যবহার করেন যার কোনও ভাষার জন্য সঠিক সমর্থন নেই, তাহলে আপনি আরও ভাল সমর্থন সহ একই ভাষার গ্লিফ ব্যবহার করতে পারেন।

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • প্রান্ত: সমর্থিত নয়।
  • ফায়ারফক্স: ৩৪।
  • সাফারি: সমর্থিত নয়।

Source

CSS অ্যাঙ্করড ফলব্যাক কন্টেইনার কোয়েরি

Chrome 143 কোন position-try-fallbacks প্রয়োগ করা হয় তার উপর ভিত্তি করে anchor positioned elements এর স্টাইল ডিসেন্ডেন্টদের জন্য @container anchored(fallback) প্রবর্তন করে।

অ্যাঙ্কর এবং অ্যাঙ্করড এলিমেন্ট একে অপরের সাপেক্ষে কীভাবে অবস্থান করছে তার উপর ভিত্তি করে, এই ধরনের কোয়েরিগুলি একটি অ্যাঙ্করড এলিমেন্টের টিথার বা এর অ্যানিমেশনগুলিকে স্টাইল করতে ব্যবহার করা যেতে পারে।

background-position-x/y লংহ্যান্ডের জন্য পার্শ্ব-সম্পর্কিত সিনট্যাক্স

এছাড়াও Chrome-এ, এবং এখন সমস্ত ব্রাউজারে উপলব্ধ, background-position এর longhand বৈশিষ্ট্যে ব্যাকগ্রাউন্ড চিত্রের অবস্থান তার একটি প্রান্তের সাপেক্ষে নির্ধারণ করার ক্ষমতা রয়েছে। উদাহরণস্বরূপ:

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • প্রান্ত: সমর্থিত নয়।
  • ফায়ারফক্স: ৪৯।
  • সাফারি: ১৫.৪।

অ্যানিমেশন overallProgress সম্পত্তি

Safari 26.2-এ overallProgress অন্তর্ভুক্ত। অ্যানিমেশন ইন্টারফেসের এই পঠনযোগ্য বৈশিষ্ট্যটি 0 এবং 1 এর মধ্যে একটি সংখ্যা প্রদান করে যা অ্যানিমেশনটির সমাপ্ত অবস্থার দিকে সামগ্রিক অগ্রগতি নির্দেশ করে।

এই সম্পত্তিটি এখন বেসলাইন নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: ১৩৩।
  • প্রান্ত: ১৩৩।
  • ফায়ারফক্স: ১৪২।
  • সাফারি প্রযুক্তি পূর্বরূপ: সমর্থিত।

Source

LCP এবং INP এখন বেসলাইন নতুনভাবে উপলব্ধ।

সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) এবং ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিক্স এখন বেসলাইন নিউলি উপলব্ধ, এই মেট্রিক্স পরিমাপ করার জন্য প্রয়োজনীয় কন্টেন্টফুল পেইন্ট API এবং ইভেন্ট টাইমিং API-এর জন্য Safari 26.2-এ সমর্থন সহ।

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

বৃহত্তম কন্টেন্টফুল পেইন্ট API

Browser Support

  • ক্রোম: ৭৭।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ১২২।
  • সাফারি: সমর্থিত নয়।

Source

ইভেন্ট টাইমিং API

Browser Support

  • ক্রোম: ৭৬।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ৮৯।
  • সাফারি: সমর্থিত নয়।

Source

CHIPS বেসলাইনে পৌঁছেছে নতুন উপলব্ধ

Safari 26.2-এ CHIPS (স্বাধীন পার্টিশনড স্টেট সহ কুকিজ)ও অন্তর্ভুক্ত রয়েছে, যা আপনাকে পার্টিশনড স্টোরেজে একটি কুকি বেছে নিতে দেয়, প্রতিটি টপ-লেভেল সাইটের জন্য একটি পৃথক কুকি জার সহ।

Browser Support

  • ক্রোম: ১১৪।
  • প্রান্ত: ১১৪।
  • ফায়ারফক্স: ১৪১।
  • সাফারি: সমর্থিত নয়।

Source

hidden="until-found"

Safari 26.2-এ hidden="until-found" এর জন্য সমর্থন রয়েছে, যা এখন Baseline নতুনভাবে উপলব্ধ।

Browser Support

  • ক্রোম: ১০২।
  • প্রান্ত: ১০২।
  • ফায়ারফক্স: ১৩৯।
  • সাফারি প্রযুক্তি পূর্বরূপ: সমর্থিত।

Source

command এবং commandfor অ্যাট্রিবিউট

এছাড়াও Safari 26.2-এ HTML-এর জন্য command এবং commandfor অন বোতাম সমর্থন করে। এটি পপওভার এবং ডায়ালগ নিয়ন্ত্রণ করার একটি ঘোষণামূলক উপায় প্রদান করে।

Browser Support

  • ক্রোম: ১৩৫।
  • প্রান্ত: ১৩৫।
  • ফায়ারফক্স: ১৪৪।
  • সাফারি প্রযুক্তি পূর্বরূপ: সমর্থিত।

Source

command এবং commandfor সাথে পরিচিতি সম্পর্কে আরও জানুন।

scrollend ইভেন্ট

Safari 26.2-এ নতুনভাবে উপলব্ধ বেসলাইন হওয়ার আরেকটি বৈশিষ্ট্য হল scrollend ইভেন্ট। স্ক্রোলিং সম্পূর্ণ হলে এই ইভেন্টটি সক্রিয় হয়, এটি সম্পর্কে আরও জানুন Scrollend, একটি নতুন JavaScript ইভেন্টে ।

Browser Support

  • ক্রোম: ১১৪।
  • প্রান্ত: ১১৪।
  • ফায়ারফক্স: ১০৯।
  • সাফারি প্রযুক্তি পূর্বরূপ: সমর্থিত।

Source

scrollbar-color বৈশিষ্ট্য

scrollbar-color বৈশিষ্ট্য আপনাকে স্ক্রলবার থাম্ব এবং স্ক্রলবার ট্র্যাকের রঙ পরিবর্তন করতে দেয়। সাফারি 26.2 এর সাথে এটি বেসলাইন নিউলি উপলব্ধ হয়ে ওঠে।

Browser Support

  • ক্রোম: ১২১।
  • প্রান্ত: ১২১।
  • ফায়ারফক্স: ৬৪।
  • সাফারি: সমর্থিত নয়।

Source

বিটা ব্রাউজার রিলিজ

বিটা ব্রাউজার ভার্সনগুলি আপনাকে ব্রাউজারের পরবর্তী স্থিতিশীল ভার্সনে কী কী থাকবে তার একটি পূর্বরূপ দেবে। নতুন বৈশিষ্ট্যগুলি পরীক্ষা করার জন্য বা অপসারণ করার জন্য এটি একটি দুর্দান্ত সময়, যা বিশ্বে সেই রিলিজ পাওয়ার আগে আপনার সাইটকে প্রভাবিত করতে পারে। এই মাসে নতুন বিটা হল Firefox 147 এবং Chrome 144 ।

Chrome 144-এ রয়েছে ::search-text pseudo-element, যা ফাইন্ড-ইন-পেজ সার্চ রেজাল্ট স্টাইলিং এর জন্য এবং @scroll-state এর জন্য scrolled সাপোর্ট, যা আপনাকে সাম্প্রতিক স্ক্রলিং দিকনির্দেশের উপর ভিত্তি করে কন্টেইনারের বংশধরদের স্টাইল করতে দেয়। এছাড়াও Temporal API অন্তর্ভুক্ত, যেখানে তারিখ এবং সময় নিয়ে কাজ করার জন্য স্ট্যান্ডার্ড অবজেক্ট এবং ফাংশন রয়েছে।

ফায়ারফক্স ১৪৭ একটি উত্তেজনাপূর্ণ রিলিজ যার মধ্যে রয়েছে CSS অ্যাঙ্কর পজিশনিং, ভিউ ট্রানজিশন টাইপ এবং নেভিগেশন API।

এই বছর যেসব আকর্ষণীয় CSS এবং UI বৈশিষ্ট্য এসেছে সে সম্পর্কে আরও জানতে, CSS Wrapped 2025 দেখুন।