ওয়েব UI-তে নতুন কী আছে

ব্রামাস
উনা ক্রাভেটস

প্রকাশিত: ১ জুলাই, ২০২৬

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

'ওয়েব UI-তে নতুন কী আছে' সেশনে উল্লিখিত সমস্ত ফিচারের একটি বিশদ সারসংক্ষেপ এখানে দেওয়া হলো, যা আমাদের মূল UX নীতিমালার ওপর ভিত্তি করে সাজানো হয়েছে।

পর্ব ১: ব্যবহারকারীর পছন্দকে সম্মান করুন

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

1. contrast-color()

contrast-color() ` CSS ফাংশনটি একটি ইনপুট কালার গ্রহণ করে এবং WCAG AA মিনিমাম কনট্রাস্ট অ্যালগরিদম অনুসারে, ইনপুট কালারটির সাথে যেটির কনট্রাস্ট বেশি, তার উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে black বা white রিটার্ন করে। এর ফলে টেক্সট ও ব্যাকগ্রাউন্ডের রঙের জোড়া ম্যানুয়ালি ঠিক রাখার ঝামেলা ছাড়াই পাঠযোগ্যতা নিশ্চিত হয়।

Browser Support

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

Source

contrast-color() সম্পর্কে আরও জানুন

2. light-dark()

light-dark() CSS ফাংশনটি আপনাকে একটিমাত্র ডিক্লারেশনের মধ্যেই কোনো প্রপার্টির জন্য দুটি ভিন্ন ভ্যালু (রঙ বা ছবি) নির্দিষ্ট করার সুযোগ দেয়—একটি লাইট মোডের জন্য এবং অন্যটি ডার্ক মোডের জন্য। ব্রাউজারটি সক্রিয় color-scheme উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে সঠিক কনট্রাস্ট রঙটি নির্বাচন করে (যেটি অবশ্যই :root বা তার প্যারেন্টে light , dark , বা light dark হিসেবে সেট করা থাকতে হবে)।

Browser Support

  • ক্রোম: ১২৩।
  • প্রান্ত: ১২৩।
  • ফায়ারফক্স: ১২০।
  • সাফারি: ১৭.৫।

Source

light-dark() ফাংশনের নতুন বৈশিষ্ট্য হলো, এটি এখন আর শুধু রঙের মানের মধ্যেই সীমাবদ্ধ নয়। Chrome 150 থেকে শুরু করে, এটি এখন দুটি ছবির মানও গ্রহণ করে।

Browser Support

  • ক্রোম: একটি পতাকার আড়ালে।
  • প্রান্ত: একটি পতাকার পিছনে।
  • ফায়ারফক্স: ১৫০।
  • সাফারি সমর্থিত নয়।

৩. CSS কাস্টম ফাংশন ( @function )

@function অ্যাট-রুলটি আপনাকে সরাসরি নেটিভ CSS-এর মধ্যেই কাস্টম ও পুনঃব্যবহারযোগ্য ফাংশন সংজ্ঞায়িত করার সুযোগ দেয়। এটি আর্গুমেন্ট হিসেবে লোকালি-স্কোপড কাস্টম প্রোপার্টি গ্রহণ করতে পারে, গণনা সম্পাদন করতে পারে এবং result ডেসক্রিপ্টর ব্যবহার করে ভ্যালু রিটার্ন করতে পারে, যা প্রিপ্রসেসরের প্রয়োজনীয়তা হ্রাস করে।

Browser Support

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

Source

কন্টেইনার স্টাইল কোয়েরি এবং CSS if() ফাংশনের সাথে মিলিয়ে, আপনি একটি কাস্টম --light-dark() ফাংশন তৈরি করতে পারেন যা যেকোনো ধরনের মানের সাথে কাজ করে, যেমনটি এই ডেমোতে দেখানো হয়েছে:

৪. কন্টেইনার শৈলীর কোয়েরি

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

Browser Support

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

এই ডেমোতে, --theme কাস্টম প্রপার্টির উপর ভিত্তি করে রং নির্ধারণ করতে স্টাইল কোয়েরি ব্যবহার করা হয়েছে। 

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

স্টাইল কোয়েরি সম্পর্কে আরও জানুন

৫. CSS if() ফাংশন

if() CSS ফাংশনটি সরাসরি CSS প্রপার্টির ভ্যালুতে ইনলাইন কন্ডিশনাল লজিক নিয়ে আসে। এটি সেমিকোলন দ্বারা পৃথক করা একাধিক শর্ত (যেমন স্টাইল কোয়েরি, মিডিয়া কোয়েরি বা ফিচার কোয়েরি) মূল্যায়ন করে এবং প্রথম সত্য শর্তটির সাথে বিভিন্ন ভ্যালু সেট করার সুযোগ দেয়, সাথে একটি ঐচ্ছিক else ফলব্যাকও থাকে।

Browser Support

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

Source

পূর্ববর্তী ডেমোতে, contrast-color() ফাংশনের আউটপুটের উপর ভিত্তি করে একটি থিমযুক্ত কনট্রাস্ট কালার তৈরি করতে if() ফাংশনটি ব্যবহার করা হয়েছে।

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

৬. @supports at-rule()

@supports সাথে ব্যবহারের জন্য CSS-এর at-rule() ফাংশনটি ডেভেলপারদেরকে ফিচার-ডিটেক্ট করার সুযোগ দেয় যে, কোনো ব্রাউজার @starting-style বা @view-transition মতো কোনো নির্দিষ্ট at-rule চিনতে পারছে কি না।

উদাহরণস্বরূপ, @function এর সমর্থন আছে কিনা তা পরীক্ষা করতে, এটি নিম্নরূপে ব্যবহার করুন:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

at-rule() ব্যবহার করে শুধুমাত্র at-rule-টির নিজস্ব বেস সাপোর্ট পরীক্ষা করা যায় এবং এটি নির্দিষ্ট ডেসক্রিপ্টর, প্রিলিউড বা সম্পূর্ণ at-rule ব্লক পরীক্ষা করার জন্য ব্যবহার করা যায় না। অ্যাঙ্কর্ড কোয়েরি বা স্টাইল কোয়েরির মতো বিষয়গুলো ফিচার ডিটেক্ট করার জন্য বিকল্প উপায় রয়েছে।

@supports at-rule সম্পর্কে আরও জানুন

৭. <meta name="text-scale">

text-scale HTML মেটা ট্যাগটি <html> রুট এলিমেন্টের প্রাথমিক ফন্ট সাইজকে অপারেটিং সিস্টেম এবং ব্রাউজার-স্তরের টেক্সট স্কেল সেটিংসের সাথে সামঞ্জস্য রেখে পরিবর্তন করার জন্য পেজটিকে সম্মতি দেয়, যা বিশেষ করে মোবাইল প্ল্যাটফর্মের জন্য অত্যন্ত গুরুত্বপূর্ণ।

Browser Support

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

Source

প্রয়োগ করা হলে, html এলিমেন্টের ফন্ট-সাইজ এখন অপারেটিং সিস্টেম দ্বারা নির্ধারিত হয়, তাই আপনার কোনো বেস font-size সেট করার প্রয়োজন নেই। এরপর যদি আপনি em এবং rem মতো আপেক্ষিক এককসহ দৈর্ঘ্য ব্যবহার করেন, তাহলে গণনাকৃত পিক্সেল মানগুলো সেই বেস ফন্ট-সাইজের উপর ভিত্তি করে নির্ধারিত হবে।

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

DevTools-এর রেন্ডারিং ট্যাব থেকে আপনি আপনার পছন্দের ফন্ট-সাইজ অনুকরণ করতে পারেন। মান পরিবর্তন করতে ড্রপডাউনটি ব্যবহার করুন।

<meta name=text-scale> সম্পর্কে আরও জানুন

পর্ব ২: স্বাভাবিক মিথস্ক্রিয়া বাস্তবায়ন করুন

ওয়েব অভিজ্ঞতাকে নেটিভ অ্যাপ্লিকেশনের মতো স্পর্শযোগ্য করে তোলার জন্য স্বতঃস্ফূর্ত, শারীরিক গতি এবং স্বাভাবিক অঙ্গভঙ্গি অত্যন্ত গুরুত্বপূর্ণ। আর আধুনিক CSS আপনার জন্য এটি অর্জন করা আরও সহজ করে তোলে।

৮. linear() ইজিং ফাংশন

linear() ইজিং ফাংশনটি আপনাকে সীমাহীন সংখ্যক নির্দিষ্ট প্রোগ্রেস পয়েন্টের মধ্যে রৈখিকভাবে ইন্টারপোলেট করার মাধ্যমে জটিল ও কাস্টম ট্রানজিশন কার্ভ (যেমন বাউন্স, স্প্রিং বা ইলাস্টিক ওভারশুট) তৈরি করতে দেয়।

Browser Support

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

Source

নিম্নলিখিত ডেমোতে, ডায়ালগটি দেখানো বা লুকানোর সময় এটিকে একটি স্বাভাবিক ইজিং দেওয়ার জন্য linear() ব্যবহার করা হয়েছে।

linear() সম্পর্কে আরও জানুন

৯. @starting-style

@starting-style CSS অ্যাট-রুলটি কোনো এলিমেন্টের প্রোপার্টিগুলোর জন্য প্রারম্ভিক মান নির্ধারণ করে, যে মানগুলো থেকে এলিমেন্টটি DOM-এ প্রথমবার রেন্ডার হওয়ার সময় বা এর display none থেকে কোনো দৃশ্যমান মানে পরিবর্তিত হওয়ার সময় ট্রানজিশনটি চালু রাখা হয়, যাতে নির্বিঘ্ন এন্ট্রি ট্রানজিশন সম্ভব হয়।

Browser Support

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

Source

আগের ডেমোতে, <dialog> -টি প্রথম দৃশ্যমান হওয়ার সাথে সাথে সেটিকে অ্যানিমেট করে আনার জন্য এটি ব্যবহার করা হয়।

10. transition-behavior: allow-discrete

transition-behavior প্রপার্টি (যা প্রায়শই transition শর্টহ্যান্ডে allow-discrete হিসেবে ব্যবহৃত হয়) আপনাকে display বা overlay মতো স্বতন্ত্র প্রপার্টিগুলোর ট্রানজিশন করতে দেয়, যা নিশ্চিত করে যে এলিমেন্টগুলো লুকানোর আগে এক্সিট অ্যানিমেশনের সময় দৃশ্যমান থাকে।

Browser Support

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

Source

১১. sibling-index() এবং sibling-count()

sibling-index() এবং sibling-count() CSS ফাংশনগুলো যথাক্রমে একটি এলিমেন্টের তার সিবলিংদের মধ্যে ১-ভিত্তিক অবস্থান এবং মোট সিবলিং সংখ্যা নির্দেশকারী পূর্ণসংখ্যা রিটার্ন করে। জাভাস্ক্রিপ্ট ছাড়াই CSS-এ ডাইনামিকভাবে স্ট্যাগার্ড অ্যানিমেশন ডিলে গণনা করার জন্য এগুলো খুবই উপযোগী।

Browser Support

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

Source

Browser Support

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

Source

এই ডেমোতে, animation-delay -তে sibling-index() ব্যবহার করে ডায়ালগের বিষয়বস্তুগুলোকে স্তরে স্তরে সাজানো হয়েছে।

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

১২. ডায়ালগ লাইট খারিজ ( closedby অ্যাট্রিবিউট)

<dialog> এলিমেন্টের closedby অ্যাট্রিবিউট (যার ভ্যালু any ) আপনাকে ডিক্লারেটিভ "লাইট ডিসমিস" আচরণ ব্যবহার করার সুযোগ দেয়, যা কোনো কাস্টম জাভাস্ক্রিপ্ট ছাড়াই মোডাল ডায়ালগের বাইরে ক্লিক করলে বা ESC চাপলে সেগুলোকে স্বয়ংক্রিয়ভাবে বন্ধ করে দেয়।

Browser Support

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

Source

আপনি আগের ডেমোতে এটি চেষ্টা করে দেখতে পারেন।

১৩. corner-shape

পরীক্ষামূলক corner-shape শর্টহ্যান্ড প্রপার্টিটি ডেভেলপারদেরকে ( border-radius থেকে) গোলাকার কোণা পরিবর্তন করে bevel , scoop , notch , বা squircle মতো নিজস্ব ভিজ্যুয়াল শেপ তৈরি করার সুযোগ দেয় ( superellipse() ফাংশনের মাধ্যমে)। বর্ডার, শ্যাডো এবং ফোকাস আউটলাইন স্বয়ংক্রিয়ভাবে এই শেপ অনুযায়ী পরিবর্তিত হয়।

Browser Support

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

Source

পর্ব ৩: নির্দেশিত নেভিগেশন প্রদান করুন

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

১৪. একই ডকুমেন্ট ভিউ পরিবর্তন

ভিউ ট্রানজিশন এপিআই (View Transition API)- এর একটি অংশ হিসেবে, সেম-ডকুমেন্ট ট্রানজিশন (same-document transitions) সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA)-এ ডোম (DOM)-এর বিভিন্ন অবস্থার মধ্যে অ্যানিমেশন করার একটি পদ্ধতি প্রদান করে, যা স্ন্যাপশট গ্রহণ করে এবং সিএসএস (CSS) ব্যবহার করে সেগুলোকে ট্রানজিশন করে।

Browser Support

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

Source

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

১৫. বিভিন্ন ডকুমেন্টের মধ্যে দৃশ্য পরিবর্তন

এটি ভিউ ট্রানজিশন এপিআই-কে মাল্টি-পেজ অ্যাপ্লিকেশন (এমপিএ)-এর জন্য প্রসারিত করে, যার ফলে বিভিন্ন পেজ জুড়ে একই view-transition-name এলিমেন্টগুলোকে মিলিয়ে আপনি বিভিন্ন ডকুমেন্টের মধ্যে নেভিগেট করার সময় নির্বিঘ্ন ও অ্যানিমেটেড ট্রানজিশন তৈরি করতে পারেন।

Browser Support

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

Source

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন সম্পর্কে আরও জানুন

১৬. এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন

ক্রোম ১৪৭-এ প্রবর্তিত এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন আপনাকে পেজের বাকি অংশকে সক্রিয় ও ইন্টারেক্টিভ রেখে শুধুমাত্র একটি নির্দিষ্ট DOM সাবট্রি-তে ( element.startViewTransition() ব্যবহার করে) ভিউ ট্রানজিশন চালানোর সুযোগ দেয়।

Browser Support

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

একটি এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন শুরু করার সময়, এটি বিচ্ছিন্নভাবে চলে: এটি শুধুমাত্র সেই সাবট্রি-তে ' view-transition-name যুক্ত এলিমেন্টগুলো স্ক্যান করে এবং ::view-transition সিউডো-টি সরাসরি স্কোপ রুটে ইনজেক্ট করা হয়। view-transition-scope: all এর স্বয়ংক্রিয় প্রয়োগের ফলেই এই বিচ্ছিন্নতা সম্ভব হয়।

এর ফলে একই সময়ে একাধিক ভিউ ট্রানজিশন চালানো যায়, সেইসাথে ভিউ ট্রানজিশনগুলোকে একটির ভেতরে আরেকটি বসানোও সম্ভব: এই তালিকাগুলোর আইটেমগুলো এলোমেলো হওয়ার সময়, আপনি তালিকাগুলোকেও নিজেদের মধ্যে অদলবদল করতে পারেন।

এছাড়াও, গ্রুপ সিউডোগুলো স্বয়ংক্রিয়ভাবে নেস্টেড হয় এবং প্রয়োজনে এনক্লোজিং গ্রুপ-চাইল্ড সিউডোর ওভারফ্লো ছেঁটে ফেলা হয়।

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

এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন সম্পর্কে আরও জানুন

১৭. দ্বি-পর্যায়ের দৃশ্য রূপান্তর

এটি একটি পরীক্ষামূলক বৈশিষ্ট্য যা নতুন DOM প্রস্তুত হওয়ার জন্য অপেক্ষা না করে, প্রথমে একটি মধ্যবর্তী স্কেলেটন স্ক্রিন বা লোডিং UI-তে রূপান্তরিত হয়ে এবং তারপর ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন চালিয়ে যাওয়ার মাধ্যমে অবিলম্বে তা শুরু করে।

দ্বি-পর্যায়ের দৃশ্য পরিবর্তন সম্পর্কে আরও জানুন

১৮. স্ক্রল-চালিত অ্যানিমেশন

স্ক্রল-চালিত অ্যানিমেশনগুলো একটি CSS অ্যানিমেশনের অগ্রগতিকে সরাসরি একটি স্ক্রল কন্টেইনারের স্ক্রল পজিশনের সাথে যুক্ত করে, যা ডেভেলপারদের কার্যকর প্যারালাক্স ইফেক্ট এবং স্ক্রল ইন্ডিকেটরের মতো স্ক্রল-ভিত্তিক ইন্টারফেস তৈরি করতে সাহায্য করে।

Browser Support

  • ক্রোম: ১১৫।
  • প্রান্ত: ১১৫।
  • ফায়ারফক্স: একটি ফ্ল্যাগের আড়ালে।
  • সাফারি: ২৬।

Source

১৯. স্ক্রোল-চালিত অ্যানিমেশন

ক্রোমে নতুন সংযোজন হলো স্ক্রল- ট্রিগারড অ্যানিমেশন। স্ক্রল-ট্রিগারড অ্যানিমেশনগুলো একটি স্ক্রল বাউন্ডারি অতিক্রম করলে একটি সাধারণ সময়-ভিত্তিক CSS অ্যানিমেশন চালু করে (ট্রিগার নির্ধারণের জন্য timeline-trigger এবং এটি চালানোর জন্য animation-trigger ব্যবহার করে), যা IntersectionObserver এর একটি ডিক্লারেটিভ বিকল্প প্রদান করে।

Browser Support

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

স্ক্রল-ট্রিগারড অ্যানিমেশনের অন্তর্নিহিত প্রক্রিয়াটি হলো টাইমলাইন-ট্রিগার, যেগুলো হয় সক্রিয় অথবা নিষ্ক্রিয় থাকে।

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

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

স্ক্রোল-ট্রিগারড অ্যানিমেশন সম্পর্কে আরও জানুন

20. scroll-target-group: auto

এখন আপনি একটি নেটিভ CSS স্ক্রল-স্পাই তৈরি করতে পারেন, যা ব্যবহারকারীর স্ক্রল পজিশনের উপর ভিত্তি করে নেভিগেশন লিঙ্কগুলোকে স্বয়ংক্রিয়ভাবে হাইলাইট করে। একটি নেভিগেশন লিস্টে scroll-target-group: auto সেট করলে, ব্রাউজার স্বয়ংক্রিয়ভাবে aria-current="true" সেট করে এবং সক্রিয় লিঙ্কে :target-current সিউডো-ক্লাসটি প্রয়োগ করে। এরপর সক্রিয় লিঙ্কগুলোকে আরও স্টাইল করার জন্য :target-current ব্যবহার করা যেতে পারে।

Browser Support

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

Source

Browser Support

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

Source

scroll-target-group সহ CSS scroll-spy সম্পর্কে আরও জানুন

২১. scrollIntoView() কন্টেইনার অপশন

` scrollIntoView() ` মেথডটিতে এখন একটি container অপশন যুক্ত হয়েছে। target.scrollIntoView({container: 'nearest'}) সেট করলে স্ক্রলিং একেবারে উপরে উঠে না গিয়ে নিকটতম পূর্ববর্তী স্ক্রলারেই সীমাবদ্ধ থাকে, যা পেজ-লেভেল স্ক্রলিংয়ের কারণে সৃষ্ট বিভ্রান্তি প্রতিরোধ করে।

Browser Support

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

Source

এই ডেমোতে অপশনটি চালু ও বন্ধ করতে চেকবক্সটি ব্যবহার করুন:

container: "nearest"

২২. অপেক্ষাযোগ্য প্রোগ্রাম্যাটিক স্ক্রোলিং

সমস্ত প্রোগ্রাম্যাটিক স্ক্রল মেথড (যেমন scroll() , scrollTo() , এবং scrollIntoView() ) এখন একটি Promise রিটার্ন করে। এর ফলে ডেভেলপাররা পরবর্তী লজিক (যেমন হাইলাইট এফেক্ট যোগ করা) কার্যকর করার আগে স্মুথ স্ক্রল অ্যানিমেশন সম্পূর্ণ হওয়ার জন্য await পারেন।

Browser Support

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

Source

নিচের ডেমোতে আপনি এটি বাস্তবে দেখতে পারেন: প্রথমে এলিমেন্টটিকে স্ক্রল করে দৃশ্যমান করা হয়, এরপর এতে একটি হাইলাইট এফেক্ট যোগ করা হয়।

পর্ব ৪: বিষয়বস্তু বাড়ান, অপ্রয়োজনীয় অংশ কমান

সবচেয়ে হতাশাজনক ওয়েব অভিজ্ঞতাগুলোর মধ্যে একটি হলো কন্টেন্ট দেখার প্রত্যাশা করে অনাকাঙ্ক্ষিত পপ-আপ বা ব্যানারের কারণে বাধাগ্রস্ত হওয়া। ভিজ্যুয়াল জঞ্জাল ও অ্যাপ্লিকেশন বর্ডার দূর করে এবং গৌণ কাজগুলোকে স্তরযুক্ত UI-এর আড়ালে সরিয়ে কন্টেন্ট এলাকাকে অগ্রাধিকার দিন।

২৩. স্ক্রল-অবস্থা কোয়েরি ( scrolled )

CSS কন্টেইনার কোয়েরির একটি অংশ হিসেবে, scroll-state কোয়েরি আপনাকে একটি কন্টেইনারের স্ক্রল স্টেটের উপর ভিত্তি করে তার ডিসেন্ড্যান্টদের স্টাইল করতে দেয় (যেমন container-type: scroll-state ব্যবহার করে)। ` scrolled কোয়েরি (উদাহরণস্বরূপ, scroll-state(scrolled: bottom) ) সর্বশেষ রিলেটিভ স্ক্রলের দিক শনাক্ত করে, যা "হাইডি বার`-এর মতো প্যাটার্ন তৈরি করতে সাহায্য করে।

Browser Support

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

'হাইডি বার' প্যাটার্ন সম্পর্কে আরও জানুন

২৪. অ্যাঙ্কর করা কন্টেইনার কোয়েরি

CSS অ্যাঙ্কর পজিশনিং-এর মধ্যে অ্যাঙ্কর্ড কন্টেইনার কোয়েরি অন্তর্ভুক্ত রয়েছে, যা আপনাকে একটি অ্যাঙ্কর-পজিশনড এলিমেন্টে বর্তমানে কোন ফলব্যাক পজিশন (যেমন, fallback: bottom বা fallback: flip-block ) সক্রিয় আছে তা পরীক্ষা করতে দেয় এবং এর মাধ্যমে একটি অ্যাঙ্কর পজিশনড এলিমেন্টের স্টাইলিং-এ (যেমন টুলটিপ অ্যারো) ডাইনামিক আপডেট করা সম্ভব হয়।

Browser Support

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

নিম্নলিখিত ডেমোতে, একটি অ্যাঙ্কর পজিশনড পপওভার অ্যাঙ্করড কন্টেইনার কোয়েরি ব্যবহার করে তার ফলব্যাক পজিশন এবং ভিউপোর্টের অবস্থানের উপর ভিত্তি করে নিজেকে পুনঃস্থাপন করে। যখন টুলটিপটি ইনভোকারের উপরে খোলে, তখন এটি উৎস থেকে নিচ থেকে উপরের দিকে অ্যানিমেট করে। যখন এটি ইনভোকারের নিচে থাকে, তখন এটি উপর থেকে নিচের দিকে অ্যানিমেট করে।

২৫. CSS border-shape

` border-shape প্রপার্টি আপনাকে clip-path এর মতো একই শেপ সিনট্যাক্স ব্যবহার করে আয়তক্ষেত্রাকার নয় এমন বর্ডার নির্ধারণ করতে দেয়। `clipping`-এর থেকে ভিন্ন, border-shape বর্ডার, আউটলাইন এবং শ্যাডোকে কাস্টম শেপের সাথে দৃশ্যত সারিবদ্ধ রাখে। এটি corner-shape এর সক্ষমতাকেও ছাড়িয়ে যায়, কারণ border-shape অনেক বেশি নমনীয়।

Browser Support

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

২৬. CSS shape() ফাংশন

CSS-এর ` shape() ` ফাংশনটি আপনাকে CSS-এর মধ্যেই জটিল জ্যামিতিক পথ তৈরি করতে দেয়। এটি clip-path , border-shape , বা shape-outside এর মতো প্রোপার্টিগুলোর সাথে ব্যবহার করে এমন জৈব, আয়তক্ষেত্রাকার নয় এমন আকৃতি তৈরি করা যায়, যার বিপরীতে কন্টেন্ট ভাসতে পারে।

Browser Support

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

Source

২৭. প্রতি অক্ষে স্থির অবস্থান

ওভারফ্লো স্পেসিফিকেশনে সাম্প্রতিক একটি পরিবর্তনের ফলে কন্টেইনারগুলো এখন শুধুমাত্র একটি অক্ষের জন্য স্ক্রলার হিসেবে কাজ করতে পারে। এর ফলে স্টিকি পজিশনিং একই সাথে দুটি ভিন্ন স্ক্রল কন্টেইনার (প্রতিটি অক্ষের জন্য একটি করে) ট্র্যাক করতে পারে। এতে করে, একটি টেবিলের স্টিকি প্রথম কলাম এবং উপরের সারি একক-অক্ষের স্ক্রল কন্টেইনারের ভেতরেও প্রত্যাশিতভাবে কাজ করে।

Browser Support

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

'Experimental Web Platform Features' ফ্ল্যাগটি সক্রিয় করা থাকলে Chrome 148-এ এই ফিচারটি পরীক্ষার জন্য উপলব্ধ হবে।

position: sticky

পর্ব ৫: ফর্ম ফ্যাক্টরের সাথে মানিয়ে নিন

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

২৮. ওভারস্ক্রোল জেসচার (সোয়াইপযোগ্য এলাকা)

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

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

ওভারস্ক্রোল অঙ্গভঙ্গি সম্পর্কে আরও জানুন

২৯. ক্যানভাসে এইচটিএমএল

এইচটিএমএল-ইন-ক্যানভাস এপিআই একটি যুগান্তকারী পরিবর্তন, যা ডেভেলপারদেরকে একটি <canvas> ভিতরে ( layoutsubtree অ্যাট্রিবিউট ব্যবহার করে) আসল DOM এলিমেন্ট স্থাপন করার সুযোগ দেয়। এই এলিমেন্টগুলো সম্পূর্ণরূপে অনুসন্ধানযোগ্য ও অ্যাক্সেসযোগ্য থাকে এবং অটোফিলের মতো ব্রাউজার ফিচার সমর্থন করে, পাশাপাশি WebGL/WebGPU শেডারগুলোকে এগুলোর সাথে নেটিভভাবে ইন্টারঅ্যাক্ট করার সুযোগ দেয়।

লাইটনিং রাউন্ড

ওয়েবকে এগিয়ে নিয়ে যাওয়া আরও কিছু শক্তিশালী ফিচারের ওপর এক ঝলক দেখে নেওয়া যাক।

৩০. DOM অবস্থা-সংরক্ষণকারী মুভ ( moveBefore() )

` moveBefore() DOM মেথডটি আপনাকে DOM নোডগুলির (যেমন, চলমান ভিডিও, আইফ্রেম, বা ফোকাস করা ইনপুট) স্টেট নষ্ট না করে বা রিলোড ট্রিগার না করেই তাদের অবস্থান পরিবর্তন করতে দেয়।

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

Browser Support

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

Source

moveBefore() সম্পর্কে আরও জানুন

৩১. CSS text-fit

text-fit একটি পরীক্ষামূলক CSS প্রপার্টি যা টেক্সটের লাইনগুলোকে তাদের ধারণকারী এলিমেন্টের সঠিক প্রস্থে নির্ভুলভাবে ফিট করার জন্য ফন্ট-সাইজকে ডাইনামিকভাবে পরিবর্তন করে (উদাহরণস্বরূপ, text-fit: grow per-line-all )।

text-fit সম্পর্কে আরও জানুন

৩২. সিএসএস text-box ( text-box-trim এবং text-box-edge )

text-box প্রপার্টি (এবং এর পূর্ণাঙ্গ রূপ text-box-trim ও text-box-edge ) টেক্সটের উপরে ও নিচের উল্লম্ব ফাঁকা স্থান (লিডিং) ছেঁটে ফেলে, যা নিখুঁত উল্লম্ব সারিবদ্ধতা এবং কেন্দ্রিকতা নিশ্চিত করে।

Browser Support

  • ক্রোম: ১৩৩।
  • প্রান্ত: ১৩৩।
  • ফায়ারফক্স: একটি ফ্ল্যাগের আড়ালে।
  • সাফারি: ১৮.২।

Source

text-trim সম্পর্কে আরও জানুন

৩৩. CSS গ্যাপ ডেকোরেশন

CSS gap decorations গ্রিড এবং ফ্লেক্সবক্সে column-rule নিয়ে এসেছে এবং একটি নতুন row-rule প্রপার্টি চালু করেছে, যা ডেভেলপারদের সারি এবং কলামের মধ্যবর্তী ফাঁকা স্থান স্টাইল করার সুযোগ দেয়। সারি এবং কলামের মধ্যবর্তী ফাঁকা স্থান স্টাইল করার জন্য এখন আর বর্ডার বা সিউডো-এলিমেন্ট নিয়ে মাথা ঘামানোর প্রয়োজন নেই।

Browser Support

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

CSS গ্যাপ ডেকোরেশন সম্পর্কে আরও জানুন

৩৪. স্ক্রলবার-সচেতন ভিউপোর্ট ইউনিট ( vw , vh , ইত্যাদি)

vw এবং vh মতো ভিউপোর্ট ইউনিটগুলো স্বয়ংক্রিয়ভাবে স্ক্রলবারের আকার বিয়োগ করে (যদি :root এ overflow-y: scroll বা scrollbar-gutter: stable ডিক্লেয়ার করে স্ক্রলবারটি দৃশ্যমান থাকার নিশ্চয়তা দেওয়া হয়), যা এলিমেন্টগুলোকে 100vw তে সেট করার সময় অনিচ্ছাকৃত হরাইজন্টাল ওভারফ্লো প্রতিরোধ করে।

Browser Support

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

স্ক্রলবার-সচেতন ভিউপোর্ট ইউনিট সম্পর্কে আরও জানুন

৩৫. জাভাস্ক্রিপ্টে সিউডো-এলিমেন্ট অ্যাক্সেস

ওয়েব এপিআইগুলো এখন জাভাস্ক্রিপ্টের জন্য সিএসএস সিউডো-এলিমেন্ট (যেমন ::before বা ::after ) উন্মুক্ত করে।

আপনি Element.pseudo(type) ব্যবহার করে একটি CSSPseudoElement ইনস্ট্যান্স পেতে পারেন এবং Event.pseudoTarget ব্যবহার করে কোন সিউডো-এলিমেন্টটি একটি ইভেন্ট ট্রিগার করেছে তা পরীক্ষা করতে পারেন।

Browser Support

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

CSSPseudoElement সম্পর্কে আরও জানুন

উপসংহার

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