CSS এবং ওয়েব UI-তে সর্বশেষ: I/O 2024 রিক্যাপ

Una Kravets

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

অভিনব ইন্টারেক্টিভ অভিজ্ঞতা

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

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

নাম শুনেই বোঝা যায়, স্ক্রল-ড্রাইভেন অ্যানিমেশন এপিআই আপনাকে স্ক্রল অবজারভার বা অন্যান্য জটিল স্ক্রিপ্টিংয়ের ওপর নির্ভর না করেই ডাইনামিক স্ক্রল-ভিত্তিক অ্যানিমেশন তৈরি করতে দেয়।

স্ক্রল-চালিত অ্যানিমেশন তৈরি করুন

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

পূর্ববর্তী কোডটি একটি সাধারণ অ্যানিমেশন সংজ্ঞায়িত করে যা একটি ছবির অপাসিটি এবং স্কেল পরিবর্তন করে ভিউপোর্টে প্রদর্শিত হয়। এই অ্যানিমেশনটি স্ক্রল পজিশন দ্বারা চালিত হয়। এই ইফেক্টটি তৈরি করতে, প্রথমে CSS অ্যানিমেশন সেট আপ করুন এবং তারপরে animation-timeline সেট করুন। এক্ষেত্রে, view() ফাংশনটি তার ডিফল্ট মান সহ স্ক্রলপোর্টের (যা এই ক্ষেত্রে ভিউপোর্টও বটে) সাপেক্ষে ছবিটিকে ট্র্যাক করে।

ব্রাউজার সাপোর্ট এবং ব্যবহারকারীর পছন্দের কথা মাথায় রাখা জরুরি, বিশেষ করে অ্যাক্সেসিবিলিটির প্রয়োজনের ক্ষেত্রে। তাই, ব্রাউজার স্ক্রল-চালিত অ্যানিমেশন সাপোর্ট করে কিনা তা পরীক্ষা করতে @supports রুলটি ব্যবহার করুন, এবং ব্যবহারকারীদের মোশন পছন্দকে সম্মান জানাতে আপনার স্ক্রল-চালিত অ্যানিমেশনটিকে @media (prefers-reduced-motion: no-preference) এর মতো একটি ইউজার প্রেফারেন্স কোয়েরির মধ্যে রাখুন। এই পরীক্ষাগুলো করার পর আপনি নিশ্চিত হতে পারবেন যে আপনার স্টাইলগুলো কাজ করবে এবং অ্যানিমেশনটি ব্যবহারকারীর জন্য কোনো সমস্যা তৈরি করবে না।

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

স্ক্রল-চালিত অ্যানিমেশন বলতে যেমন পুরো পৃষ্ঠা জুড়ে স্ক্রল হওয়ার অভিজ্ঞতা বোঝাতে পারে, তেমনই এটি আরও সূক্ষ্ম অ্যানিমেশনও হতে পারে, যেমন কোনো ওয়েব অ্যাপ স্ক্রল করার সময় হেডার বার ছোট হয়ে আসা এবং তার ছায়া দেখানো।

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

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

স্ক্রোল-চালিত অ্যানিমেশনের কর্মক্ষমতাগত সুবিধা

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

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

প্রচলিত JS স্ক্রল ইভেন্ট ব্যবহারের তুলনায় আমরা আমাদের কোডের লাইন ৮০% পর্যন্ত কমাতে পেরেছি এবং লক্ষ্য করেছি যে স্ক্রল করার সময় গড় সিপিইউ ব্যবহার ৫০% থেকে কমে ২%-এ নেমে এসেছে। - অ্যান্ডি উইহালিম, সিনিয়র সফটওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া

স্ক্রোল এফেক্টের ভবিষ্যৎ

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

এবং ভবিষ্যতে ব্রাউজারগুলিতে আরও অনেক স্ক্রল ফিচার আসছে। নিম্নলিখিত ডেমোটি এই ভবিষ্যৎ ফিচারগুলির একটি সংমিশ্রণ দেখায়। এটি পিকারগুলির মধ্যে প্রাথমিক তারিখ এবং সময় সেট করতে CSS scroll-start-target ব্যবহার করে, এবং হেডারের তারিখ আপডেট করতে JavaScript scrollsnapchange ইভেন্ট ব্যবহার করে, যা snapped ইভেন্টের সাথে ডেটা সিঙ্ক্রোনাইজ করাকে অত্যন্ত সহজ করে তোলে।

এর উপর ভিত্তি করে আপনি জাভাস্ক্রিপ্টের scrollsnapchanging ইভেন্ট ব্যবহার করে রিয়েল টাইমে একটি পিকার আপডেট করতেও পারেন।

এই নির্দিষ্ট বৈশিষ্ট্যগুলি বর্তমানে শুধুমাত্র ক্যানারিতে একটি ফ্ল্যাগের অধীনে রয়েছে, তবে এগুলি এমন সব সক্ষমতা উন্মোচন করে যা পূর্বে এই প্ল্যাটফর্মে তৈরি করা অসম্ভব বা খুব কঠিন ছিল এবং স্ক্রল-ভিত্তিক ইন্টারঅ্যাকশনের ভবিষ্যতের সম্ভাবনাগুলিকে তুলে ধরে।

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

রূপান্তরগুলি দেখুন

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

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

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

আপনার সিঙ্গেল-পেজ অ্যাপ্লিকেশনে দ্রুত ভিউ ট্রানজিশন চালু করার উপায়টি খুবই সহজ। এর জন্য আপনাকে document.startViewTransition ব্যবহার করে একটি ইন্টারঅ্যাকশনকে র‍্যাপ করতে হবে এবং নিশ্চিত করতে হবে যে ট্রানজিশন হওয়া প্রতিটি এলিমেন্টের একটি view-transition-name আছে। এই কাজটি আপনি ইনলাইনভাবে অথবা DOM নোড তৈরি করার সময় জাভাস্ক্রিপ্ট ব্যবহার করে ডাইনামিকভাবে করতে পারেন।

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

রূপান্তর শ্রেণীগুলি দেখুন

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

রূপান্তরের ধরণগুলি দেখুন

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

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

আপনি আপনার document.startViewTransition ফাংশনের মধ্যে টাইপগুলো সেট আপ করতে পারেন, যা এখন একটি অবজেক্ট গ্রহণ করে। update হলো কলব্যাক ফাংশন যা DOM আপডেট করে, এবং types হলো টাইপগুলো সম্বলিত একটি অ্যারে।

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

একাধিক-পৃষ্ঠার ভিউ ট্রানজিশন

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

এই নতুন ক্রস-ডকুমেন্ট ফিচার সেটের মধ্যে একই-অরিজিনের ওয়েব অভিজ্ঞতাগুলো অন্তর্ভুক্ত, যেমন web.dev থেকে web.dev/blog-এ নেভিগেট করা; কিন্তু এর মধ্যে ক্রস-অরিজিন নেভিগেট করা অন্তর্ভুক্ত নয়, যেমন web.dev থেকে blog.web.dev-এ বা google.com-এর মতো অন্য কোনো ডোমেইনে নেভিগেট করা।

একই ডকুমেন্টের ভিউ ট্রানজিশনের একটি প্রধান পার্থক্য হলো, আপনার ট্রানজিশনটিকে document.startViewTransition() দিয়ে মোড়ানোর প্রয়োজন নেই। এর পরিবর্তে, CSS @view-transition অ্যাট-রুল ব্যবহার করে ভিউ ট্রানজিশনে জড়িত উভয় পৃষ্ঠাকেই অন্তর্ভুক্ত করুন।

@view-transition {
  navigation: auto;
}

আরও স্বতন্ত্র প্রভাবের জন্য, আপনি নতুন pageswap বা pagereveal ইভেন্ট লিসেনার ব্যবহার করে জাভাস্ক্রিপ্ট হুক করতে পারেন, যা আপনাকে ভিউ ট্রানজিশন অবজেক্টটি অ্যাক্সেস করার সুযোগ দেয়।

pageswap সাহায্যে পুরোনো স্ন্যাপশটগুলো নেওয়ার ঠিক আগে আপনি বিদায়ী পেজটিতে শেষ মুহূর্তের কিছু পরিবর্তন করতে পারেন, এবং pagereveal সাহায্যে নতুন পেজটি ইনিশিয়ালাইজ হওয়ার পর রেন্ডার হওয়া শুরু করার আগে সেটিকে নিজের মতো করে সাজিয়ে নিতে পারেন।

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

ভবিষ্যতে, আমরা ভিউ ট্রানজিশন আরও প্রসারিত করার পরিকল্পনা করছি, যার মধ্যে অন্তর্ভুক্ত থাকবে:

• স্কোপড ট্রানজিশন : এটি আপনাকে একটি ট্রানজিশনকে DOM সাবট্রি-তে সীমাবদ্ধ করতে দেয়, যার ফলে পেজের বাকি অংশ ইন্টারেক্টিভ থাকতে পারে এবং একই সময়ে একাধিক ভিউ ট্রানজিশন চলতে পারে।
• অঙ্গভঙ্গি-চালিত ভিউ পরিবর্তন : ওয়েবে আরও নেটিভ-সদৃশ অভিজ্ঞতার জন্য ড্র্যাগিং বা সোয়াইপ অঙ্গভঙ্গি ব্যবহার করে এক ডকুমেন্ট থেকে অন্য ডকুমেন্টে ভিউ পরিবর্তন করুন।
• CSS-এ নেভিগেশন ম্যাচিং : জাভাস্ক্রিপ্টে pageswap এবং pagereveal ইভেন্ট ব্যবহার করার বিকল্প হিসেবে, আপনার ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন সরাসরি CSS-এ কাস্টমাইজ করুন। মাল্টি-পেজ অ্যাপ্লিকেশনের জন্য ভিউ ট্রানজিশন সম্পর্কে আরও জানতে, যার মধ্যে প্রি-রেন্ডারিংয়ের মাধ্যমে কীভাবে সবচেয়ে ভালো পারফরম্যান্সের সাথে এগুলো সেট আপ করা যায়, তা অন্তর্ভুক্ত, ব্রামাস ভ্যান ড্যামের নিম্নলিখিত আলোচনাটি দেখুন:

ইঞ্জিন-সক্ষম UI উপাদান: জটিল মিথস্ক্রিয়াকে সরলীকরণ করা

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

ডেভেলপারদের জন্য একটি বড় সমস্যা হলো আপাতদৃষ্টিতে একটি সহজ অনুরোধ: ড্রপডাউন মেনু (সিলেক্ট এলিমেন্ট) স্টাইল করার ক্ষমতা। যদিও আপাতদৃষ্টিতে এটি সহজ মনে হয়, এটি একটি জটিল সমস্যা, যা প্ল্যাটফর্মের অনেক অংশকে প্রভাবিত করে; লেআউট এবং রেন্ডারিং থেকে শুরু করে স্ক্রল এবং ইন্টারঅ্যাকশন, ইউজার এজেন্ট স্টাইলিং এবং CSS প্রোপার্টি, এমনকি স্বয়ং HTML-এর পরিবর্তন পর্যন্ত।

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

• কিবোর্ড বাইন্ডিং (ইন্টারঅ্যাকশনে প্রবেশ/প্রস্থান করার জন্য)
• খারিজ করতে ক্লিক করুন
• সক্রিয় পপওভার ব্যবস্থাপনা (একটি পপওভার খুললে অন্যগুলো বন্ধ করে দিন)
• ট্যাব ফোকাস ব্যবস্থাপনা
• নির্বাচিত বিকল্প মান কল্পনা করা
• তীর মিথস্ক্রিয়া শৈলী
• রাষ্ট্রীয় ব্যবস্থাপনা (খোলা/বন্ধ)

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

পপওভার এপিআই

প্রথমে আমরা popover নামে একটি গ্লোবাল অ্যাট্রিবিউট চালু করেছি, যা কয়েক সপ্তাহ আগে বেসলাইন নতুন উপলব্ধ স্ট্যাটাসে পৌঁছেছে, এটা জানাতে আমি অত্যন্ত আনন্দিত।

বাটন বা জাভাস্ক্রিপ্টের মতো কোনো ইনভোকার দিয়ে খোলা না হওয়া পর্যন্ত পপওভার এলিমেন্টগুলো display: none অ্যাট্রিবিউটের মাধ্যমে লুকানো থাকে। একটি সাধারণ পপওভার তৈরি করতে, এলিমেন্টটিতে popover অ্যাট্রিবিউট সেট করুন এবং popovertarget ব্যবহার করে এর আইডিকে একটি বাটনের সাথে লিঙ্ক করুন। এখন, বাটনটিই হলো ইনভোকার।

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

এখন পপওভার অ্যাট্রিবিউটটি সক্রিয় থাকায়, ব্রাউজার কোনো অতিরিক্ত স্ক্রিপ্টিং ছাড়াই অনেক গুরুত্বপূর্ণ আচরণ পরিচালনা করে, যার মধ্যে রয়েছে:

• সর্বোচ্চ স্তরে উন্নীতকরণ। : পৃষ্ঠার বাকি অংশের উপরে একটি পৃথক স্তর, ফলে আপনাকে z-index নিয়ে কাজ করতে হবে না।
• লাইট-ডিসমিস কার্যকারিতা। : পপওভার এলাকার বাইরে ক্লিক করলে পপওভারটি বন্ধ হয়ে যাবে এবং ফোকাস ফিরে আসবে।
• ডিফল্ট ট্যাব ফোকাস ব্যবস্থাপনা। : পপওভার খুললে পরবর্তী ট্যাবটি পপওভারের ভেতরেই থেমে যায়।
• অন্তর্নির্মিত কীবোর্ড বাইন্ডিং। : esc কী চাপলে বা ডাবল টগল করলে পপওভারটি বন্ধ হয়ে যাবে এবং ফোকাস ফিরে আসবে।
• ডিফল্ট কম্পোনেন্ট বাইন্ডিং : ব্রাউজার একটি পপওভারকে তার ট্রিগারের সাথে অর্থগতভাবে সংযুক্ত করে।

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

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

প্রবেশ এবং প্রস্থানের প্রভাব অ্যানিমেট করা

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

কীফ্রেম টাইমলাইনে display এবং content-visibility অ্যানিমেট করার ক্ষমতা।

display মতো বিচ্ছিন্ন প্রপার্টিগুলোর ট্রানজিশন সক্ষম করতে allow-discrete কীওয়ার্ড সহ transition-behavior প্রপার্টি ব্যবহার করা হয়।

display: none থেকে টপ-লেয়ারে এন্ট্রি ইফেক্ট অ্যানিমেট করার জন্য @starting-style রুলটি ব্যবহৃত হয়।

অ্যানিমেশন চলাকালীন শীর্ষ স্তরের আচরণ নিয়ন্ত্রণ করার জন্য ওভারলে প্রপার্টি ব্যবহৃত হয়।

এই প্রোপার্টিগুলো টপ লেয়ারে অ্যানিমেট করা যেকোনো এলিমেন্টের জন্যই কাজ করে, সেটা পপওভার হোক বা ডায়ালগ। সব মিলিয়ে, ব্যাকড্রপসহ একটি ডায়ালগের ক্ষেত্রে এটি দেখতে এইরকম হয়:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

প্রথমে, @starting-style সেট করুন, যাতে ব্রাউজার বুঝতে পারে কোন স্টাইল ব্যবহার করে এই এলিমেন্টটিকে DOM-এ অ্যানিমেট করতে হবে। এটি ডায়ালগ এবং ব্যাকড্রপ উভয়ের জন্যই করা হয়। তারপর, ডায়ালগ এবং ব্যাকড্রপ উভয়ের ওপেন স্টেটকে স্টাইল করুন। ডায়ালগের জন্য, এটি open অ্যাট্রিবিউট ব্যবহার করে, এবং পপওভারের জন্য, ::popover-open সিউডো-এলিমেন্ট ব্যবহার করে। সবশেষে, allow-discrete কীওয়ার্ড ব্যবহার করে opacity , display , এবং overlay অ্যানিমেট করুন, যা অ্যানিমেশন মোড চালু করে যেখানে ডিসক্রিট প্রোপার্টিগুলো ট্রানজিশন করতে পারে।

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

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

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

CSS-এ একটি অ্যাঙ্কর পজিশনড রিলেশনশিপ তৈরি করতে, অ্যাঙ্করিং এলিমেন্টে (এই ক্ষেত্রে বাটন) anchor-name প্রপার্টি এবং পজিশনড এলিমেন্টে (এই ক্ষেত্রে, টুলটিপ) position-anchor প্রপার্টি ব্যবহার করুন। তারপর, anchor() ফাংশন ব্যবহার করে অ্যাঙ্করের সাপেক্ষে অ্যাবসোলিউট বা ফিক্সড পজিশনিং প্রয়োগ করুন। নিচের কোডটি টুলটিপের উপরের অংশকে বাটনের নিচের অংশে পজিশন করে।

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

বিকল্পভাবে, অ্যাঙ্কর ফাংশনে সরাসরি অ্যাঙ্কর-নেম ব্যবহার করুন এবং position-anchor প্রপার্টিটি বাদ দিন। একাধিক এলিমেন্টে অ্যাঙ্কর করার ক্ষেত্রে এটি কার্যকর হতে পারে।

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

অবশেষে, পজিশন করা এলিমেন্টটিকে তার অ্যাঙ্করের কেন্দ্রে আনতে justify এবং align প্রপার্টিতে নতুন anchor-center কীওয়ার্ডটি ব্যবহার করুন।

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

এই উদাহরণটিতে left , right এবং bottom এর মতো ভৌত বৈশিষ্ট্যগুলো ব্যবহার করে অ্যাঙ্করের অবস্থান নির্ধারণ করার জন্য `anchor` ফাংশনটি ব্যবহার করা হয়েছে। যখন আপনি লিঙ্কগুলোর কোনো একটির উপর মাউস নিয়ে যান, তখন টার্গেট অ্যাঙ্করটি পরিবর্তিত হয় এবং ব্রাউজারটি পজিশনিং প্রয়োগ করার জন্য টার্গেটটিকে সরিয়ে দেয়। একই সাথে, এটি রঙটিকেও অ্যানিমেট করে একটি চমৎকার প্রভাব তৈরি করে।

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area অবস্থান

আপনি সম্ভবত আগে ব্যবহার করেছেন এমন ডিফল্ট ডিরেকশনাল অ্যাবসোলিউট পজিশনিং ছাড়াও, অ্যাঙ্কর পজিশনিং এপিআই-এর অংশ হিসেবে ইনসেট এরিয়া নামে একটি নতুন লেআউট মেকানিজম যুক্ত হয়েছে। ইনসেট এরিয়া পজিশনড এলিমেন্টগুলোকে তাদের নিজ নিজ অ্যাঙ্করের সাপেক্ষে স্থাপন করা সহজ করে তোলে এবং এটি একটি ৯-সেল গ্রিডে কাজ করে, যেখানে অ্যাঙ্করিং এলিমেন্টটি কেন্দ্রে থাকে। উদাহরণস্বরূপ, inset-area: top পজিশনড এলিমেন্টটিকে উপরে স্থাপন করে, এবং inset-area: bottom পজিশনড এলিমেন্টটিকে নীচে স্থাপন করে।

inset-area সহ প্রথম অ্যাঙ্কর ডেমোটির একটি সরলীকৃত সংস্করণ দেখতে এইরকম:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

আপনি এই পজিশনাল ভ্যালুগুলোকে 'span' কীওয়ার্ডের সাথে একত্রিত করে কেন্দ্র অবস্থান থেকে শুরু করে বামে, ডানে অথবা উপলব্ধ সমস্ত কলাম বা সারি জুড়ে স্প্যান করতে পারেন। এছাড়াও আপনি লজিক্যাল প্রপার্টিও ব্যবহার করতে পারেন। এই লেআউট পদ্ধতিটি সহজে কল্পনা করতে ও আয়ত্ত করতে, Chrome 125+ এর এই টুলটি দেখুন:

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

position-try-options সহ গতিশীল অ্যাঙ্কর অবস্থান

পপওভার এবং অ্যাঙ্কর পজিশনিং-এর সমন্বয়ে মেনু এবং সাবমেনু নেভিগেশন তৈরি করা অনেক সহজ হয়ে যায়। আর, যখন আপনার অ্যাঙ্কর করা এলিমেন্টটি কোনো ভিউপোর্টের প্রান্তে পৌঁছে যায়, তখন আপনি ব্রাউজারকে আপনার হয়ে পজিশনিং পরিবর্তনের কাজটি করতে দিতে পারেন। আপনি কয়েকটি উপায়ে এটি করতে পারেন। প্রথমটি হলো আপনার নিজস্ব পজিশনিং রুল তৈরি করা। এই ক্ষেত্রে, সাবমেনুটি প্রাথমিকভাবে “স্টোরফ্রন্ট” বাটনের ডানদিকে অবস্থান করছে। কিন্তু মেনুর ডানদিকে যথেষ্ট জায়গা না থাকলে, আপনি একটি @position-try ব্লক তৈরি করতে পারেন এবং এটিকে --bottom এর একটি কাস্টম আইডেন্টিফায়ার দিতে পারেন। এরপর, আপনি position-try-options ব্যবহার করে এই @position-try ব্লকটিকে অ্যাঙ্করের সাথে সংযুক্ত করবেন।

এখন, ব্রাউজারটি এই অ্যাঙ্কর করা অবস্থাগুলোর মধ্যে পর্যায়ক্রমে পরিবর্তন করবে, প্রথমে সঠিক অবস্থানটি চেষ্টা করবে এবং তারপর একেবারে নিচে চলে যাবে। আর এটি একটি সুন্দর ট্রানজিশনের মাধ্যমে করা যেতে পারে।

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

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

position-try-options: flip-block, flip-inline;

সহজে ফ্লিপ করার জন্য, এই 'flip' কীওয়ার্ড ভ্যালুগুলো ব্যবহার করুন এবং ' position-try ' ডেফিনিশন লেখা পুরোপুরি বাদ দিন। ফলে এখন আপনি মাত্র কয়েকটি CSS লাইনের মাধ্যমেই একটি সম্পূর্ণ কার্যকরী ও লোকেশন-রেসপন্সিভ অ্যাঙ্কর পজিশনড এলিমেন্ট তৈরি করতে পারবেন।

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

অ্যাঙ্কর পজিশনিং ব্যবহার সম্পর্কে আরও জানুন।

স্তরযুক্ত UI এর ভবিষ্যৎ

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

এছাড়াও, দুজন থার্ড-পার্টি ডেভেলপার, কিথ সার্কেল এবং লিউক ওয়ারলো-এর কাজের সুবাদে ক্যানারিতে পরীক্ষার জন্য আরও একটি ভবিষ্যৎ-মুখী সাধারণ ইনভোকার ( invoketarget ) উপলব্ধ রয়েছে। invoketarget , popovertarget মতোই ডিক্লারেটিভ ডেভেলপার এক্সপেরিয়েন্স সমর্থন করে এবং <dialog> , <details> , <video> , <input type="file"> সহ সকল ইন্টারেক্টিভ এলিমেন্টের জন্য পপওভারগুলোকে নর্মালাইজড করে।

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

স্টাইলযোগ্য নির্বাচন

popover এবং anchor একসাথে ব্যবহার করে, আমাদের টিম অবশেষে একটি কাস্টমাইজযোগ্য সিলেক্ট ড্রপডাউন চালু করার দিকে অগ্রগতি করছে। সুখবর হলো, এক্ষেত্রে অনেক অগ্রগতি হয়েছে। আর দুঃসংবাদ হলো, এই এপিআইটি এই মুহূর্তে এখনও অনেকটাই পরীক্ষামূলক পর্যায়ে রয়েছে। তবে, আমি আমাদের অগ্রগতির কিছু লাইভ ডেমো এবং আপডেট আপনাদের সাথে শেয়ার করতে এবং আশা করি আপনাদের কিছু মতামত পেতে আগ্রহী। প্রথমত, ব্যবহারকারীদের নতুন, কাস্টমাইজযোগ্য সিলেক্ট অভিজ্ঞতায় অন্তর্ভুক্ত করার পদ্ধতিতে অগ্রগতি হয়েছে। এটি করার জন্য বর্তমানে যে পদ্ধতিটি নিয়ে কাজ চলছে, তা হলো CSS-এ একটি অ্যাপিয়ারেন্স প্রপার্টি ব্যবহার করা, যা appearance: base-select হিসেবে সেট করা থাকবে। একবার অ্যাপিয়ারেন্স সেট করা হয়ে গেলে, আপনি একটি নতুন, কাস্টমাইজযোগ্য সিলেক্ট অভিজ্ঞতায় অন্তর্ভুক্ত হয়ে যাবেন।

select {
  appearance: base-select;
}

appearance: base-select ছাড়াও, কয়েকটি নতুন HTML আপডেট আনা হয়েছে। এর মধ্যে রয়েছে কাস্টমাইজেশনের জন্য আপনার অপশনগুলোকে একটি datalist মধ্যে রাখার সুবিধা এবং আপনার অপশনগুলোতে ছবির মতো যেকোনো নন-ইন্টারেক্টিভ কন্টেন্ট যোগ করার সুবিধা। এছাড়াও আপনি একটি নতুন এলিমেন্ট, <selectedoption> `, ব্যবহার করতে পারবেন, যা অপশনগুলোর কন্টেন্টকে নিজের মধ্যে প্রতিফলিত করবে এবং আপনি সেটিকে আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারবেন। এই এলিমেন্টটি সত্যিই খুব কাজের।

ডেমো ভিজ্যুয়াল

লাইভ ডেমো

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

নিম্নলিখিত কোডটি জিমেইল UI-তে <selectedoption> কাস্টমাইজ করার পদ্ধতি প্রদর্শন করে, যেখানে জায়গা বাঁচানোর জন্য নির্বাচিত উত্তরের ধরন বোঝাতে একটি ভিজ্যুয়াল আইকন ব্যবহার করা হয়। আপনি অপশনের স্টাইলিং এবং প্রিভিউ স্টাইলিংয়ের মধ্যে পার্থক্য করার জন্য selectedoption ভেতরে বেসিক ডিসপ্লে স্টাইল ব্যবহার করতে পারেন। এক্ষেত্রে, অপশনে প্রদর্শিত টেক্সটকে selectedoption ভেতরে দৃশ্যত লুকিয়ে রাখা যায়।

ডেমো ভিজ্যুয়াল

লাইভ ডেমো

selectedoption .text {
  display: none;
}

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

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

একচেটিয়া অ্যাকর্ডিয়ন

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

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

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid এবং :user-invalid

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

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

user-* ফর্ম ভ্যালিডেশন সিউডো-এলিমেন্ট ব্যবহার সম্পর্কে আরও জানুন।

field-sizing: content

সম্প্রতি আসা আরেকটি দরকারি কম্পোনেন্ট আপডেট হলো field-sizing: content , যা ইনপুট এবং টেক্সটএরিয়ার মতো ফর্ম কন্ট্রোলগুলিতে প্রয়োগ করা যায়। এটি ইনপুটের বিষয়বস্তুর উপর নির্ভর করে এর আকার বাড়াতে (বা কমাতে) সক্ষম করে। field-sizing: content টেক্সটএরিয়ার জন্য বিশেষভাবে সুবিধাজনক হতে পারে, কারণ এর ফলে আপনাকে আর নির্দিষ্ট আকারের মধ্যে সীমাবদ্ধ থাকতে হয় না, যেখানে একটি খুব ছোট ইনপুট বক্সে আপনার প্রম্পটের আগের অংশগুলিতে লেখা দেখতে উপরে স্ক্রল করার প্রয়োজন হতে পারত।

textarea, select, input {
  field-sizing: content;
}

মাঠের আকার নির্ধারণ সম্পর্কে আরও জানুন।

<hr> <select> এ

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

স্ক্রিনশট নির্বাচন করুন

লাইভ ডেমো নির্বাচন করুন

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

নির্বাচিত ক্ষেত্রে এইচআর ব্যবহার সম্পর্কে আরও জানুন

জীবনযাত্রার মানের উন্নতি

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

ভবিষ্যতের দিকে তাকিয়ে বাসা বাঁধা

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

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

ব্লক লেআউটের জন্য কন্টেন্ট সারিবদ্ধ করুন

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

স্ক্রিনশট

লাইভ ডেমো

div {
  align-content: center;
}

টেক্সট-র‍্যাপ: ভারসাম্যপূর্ণ এবং সুন্দর

লেআউটের কথা বলতে গেলে, text-wrap: balance এবং pretty যুক্ত হওয়ার ফলে টেক্সট লেআউটে একটি চমৎকার উন্নতি হয়েছে। text-wrap: balance টেক্সটকে আরও সুষমভাবে বিন্যস্ত করার জন্য ব্যবহৃত হয়, অন্যদিকে text-wrap: pretty টেক্সটের শেষ লাইনে থাকা একক অক্ষরের সংখ্যা কমাতে সাহায্য করে।

h1 {
  text-wrap: balance;
}

text-wrap: balance সম্পর্কে আরও জানুন।

আন্তর্জাতিক টাইপোগ্রাফি আপডেট

গত এক বছরে CJK টেক্সট ফিচারগুলোর টাইপোগ্রাফিক লেআউটে অনেক চমৎকার আপডেট এসেছে, যেমন word-break: auto-phrase ফিচারটি, যা স্বাভাবিক বাক্যাংশের সীমানায় লাইনটিকে মুড়ে দেয়।

এবং text-spacing-trim , যা চীনা, জাপানি এবং কোরিয়ান টাইপোগ্রাফির পঠনযোগ্যতা উন্নত করতে এবং আরও দৃষ্টিনন্দন ফলাফল প্রদানের জন্য বিরামচিহ্নগুলোর মধ্যে কার্নিং প্রয়োগ করে।

আপেক্ষিক রঙের সিনট্যাক্স

কালার থিমিংয়ের জগতে আমরা রিলেটিভ কালার সিনট্যাক্সের মাধ্যমে একটি বড় আপডেট দেখেছি।

In this example, the colors here use Oklch-based theming. As the hue-value adjusts based on the slider, the entire theme changes. This can be achieved with relative color syntax. The background uses the primary color, based on the hue, and adjusts the lightness, chroma, and hue channels to adjust its value. --i is the sibling index in the list for the gradation of values, showing how you can combine stepping with custom properties and relative color syntax to build themes.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark() function

Along with the light-dark() function, theming has become much more dynamic and simplified.

The light-dark() function is an ergonomic improvement that simplifies color theming options so that you can write theme styles in a more concise way, as demonstrated so nicely in this visual diagram by Adam Argyle. Before, you would need two different blocks of code, (your default theme and a user preference query), to set up theme options. Now, you can write these style options for both light and dark themes in the same line of CSS using the light-dark() function.

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

If the user selected a light theme, the button will have a light blue background. If the user selected a dark theme, the button will have a dark blue background.

:has() selector

And I would be remiss to talk about modern UI without mentioning one of the most impactful interop highlights from the past year, which has to be the :has() selector, landing across browsers in December of last year. This API is a game-changer for writing logical styles.

The :has() selector enables you to check if a child element has specific children, or if those children are in a specific state, and essentially can function as a parent selector as well.

:has() has already shown to be particularly useful for many companies , including PolicyBazaar, who use :has() to style blocks based on their interior content, such as in the compare section, where the style adjusts if there is a plan to compare in the block, or if its empty.

“With the :has() selector, we were able to eliminate JavaScript based validation of the user's selection and replace it with a CSS solution which is working seamlessly for us with the same experience as before.–Aman Soni, Tech Lead, PolicyBazaar”

Container queries

Another key addition to the web that is now newly available and growing in usage is container queries, which enable the ability to query an element parent's intrinsic size to apply styles: a much more fine-toothed comb than media queries, which only query the viewport size.

Angular recently launched a beautiful new documentation site on angular.dev using container queries to style the header blocks based on their available space on the page. So even if the layout changes, and goes from a multicolumn sidebar layout to a single-column layout, the header blocks can self-adjust.

Without container queries, doing something like this was quite hard to achieve, and damaging for performance, requiring resize observers and element observers. Now, it's trivial to style an element based on its parent size.

@property

And finally very soon, we are excited to see @property land in Baseline. This is a key feature for providing semantic meaning to CSS custom properties (also known as CSS variables), and enables a slew of new interaction features. @property also enables contextual meaning, typechecking, defaults, and fallback values in CSS. Opening the doors for even more robust features like range style queries. This is a feature that was never possible before, and now provides so much depth to the language of CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

উপসংহার

With all of these new powerful UI capabilities landing across browsers, the possibilities are endless. Novel interactive experiences with scroll-driven animations and view transitions make the web more fluid and interactive in ways we've never seen before. And next level UI components make it easier than ever to build robust, beautifully customized components without ripping out the entire native experience. And finally, quality of life improvements in architecture, layout, typography, and responsive design not only solve the little big things, but also give developers the tools they need to build complex interfaces that work on a variety of devices, form factors, and user needs.

These new features you should be able to remove third-party scripting for performance-heavy features like scrollytelling and tethering elements to each other with anchor positioning, build fluid page transitions, finally style dropdowns, and improve the overall structure of your code natively.

It's never been a better time to be a web developer. There hasn't been so much energy and excitement since the announcement of CSS3. Features we've needed but have only dreamed of actually landing in the past, are finally becoming a reality and a part of the platform. And it's because of your voice that we're able to prioritize and finally bring these capabilities to life. We're working on making it easier to do the hard, tedious stuff natively so you can spend more time building the things that matter–like the core features and design details that set your brand apart.

To learn more about these new features as they land, follow along at developer.chrome.com and web.dev, where our team shares the latest news in web technologies. Try out scroll driven animations, view transitions, anchor positioning, or even the stylable select, and let us know what you think. We're here to listen and we're here to help.