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

Una Kravets

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

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

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

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

নাম থেকেই বোঝা যায়, স্ক্রোল-চালিত অ্যানিমেশন API আপনাকে স্ক্রোল পর্যবেক্ষক বা অন্যান্য ভারী স্ক্রিপ্টিংয়ের উপর নির্ভর না করেই গতিশীল স্ক্রোল-ভিত্তিক অ্যানিমেশন তৈরি করতে দেয়।

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

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

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

@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;
}

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

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

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

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

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

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

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

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

আপনি জাভাস্ক্রিপ্ট scrollsnapchanging ইভেন্টের মাধ্যমে রিয়েল টাইমে একটি পিকার আপডেট করার জন্য এটি তৈরি করতে পারেন।

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

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

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

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

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

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

আপনার একক-পৃষ্ঠার অ্যাপ্লিকেশনে দ্রুত ভিউ ট্রানজিশন সক্ষম করার উপায় হল document.startViewTransition ব্যবহার করে একটি ইন্টারঅ্যাকশন মোড়ানো এবং DOM নোড তৈরি করার সময় ট্রানজিশন করা প্রতিটি এলিমেন্টের একটি view-transition-name , inline, অথবা গতিশীলভাবে জাভাস্ক্রিপ্ট ব্যবহার করা নিশ্চিত করার মতোই সহজ।

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-এ ক্লাস যোগ করতে পারতেন, এবং পরে ক্লাসগুলি সরিয়ে ফেলতে হত। View-transition-types ব্রাউজারকে নতুন ট্রানজিশন শুরু করার আগে ম্যানুয়ালি এটি করার পরিবর্তে পুরানো ট্রানজিশনগুলি পরিষ্কার করতে সক্ষম করে, যা আপনার জন্য এটি কাজ করে।

তুমি তোমার 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 at-rule ব্যবহার করে ভিউ ট্রানজিশনের সাথে জড়িত উভয় পৃষ্ঠাই অপ্ট-ইন করুন।

@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 নামে একটি বিশ্বব্যাপী বৈশিষ্ট্য প্রেরণ করেছি, যা কয়েক সপ্তাহ আগে বেসলাইনে নতুন উপলব্ধ অবস্থায় পৌঁছেছে বলে ঘোষণা করতে পেরে আমি আনন্দিত।

Popover এলিমেন্টগুলি display: none ব্যবহার করে লুকানো থাকে যতক্ষণ না এটি একটি invoker যেমন একটি বোতাম বা JavaScript দিয়ে খোলা হয়। একটি মৌলিক popover তৈরি করতে, এলিমেন্টে popover অ্যাট্রিবিউট সেট করুন এবং popovertarget ব্যবহার করে এর ID একটি বোতামের সাথে লিঙ্ক করুন। এখন, বোতামটি হল invoker,

<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 কী টিপলে অথবা ডবল টগল করলে পপওভার বন্ধ হয়ে যাবে এবং ফোকাস ফিরে আসবে।
• ডিফল্ট কম্পোনেন্ট বাইন্ডিং। : ব্রাউজারটি শব্দার্থিকভাবে একটি পপওভারকে তার ট্রিগারের সাথে সংযুক্ত করে।

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

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

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

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

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

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

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

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

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

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 state স্টাইল করুন। একটি ডায়ালগের জন্য, এটি open অ্যাট্রিবিউট ব্যবহার করে এবং একটি popover-এর জন্য, ::popover-open pseudo-element ব্যবহার করে। অবশেষে, অ্যানিমেশন মোড সক্ষম করতে allow-discrete কীওয়ার্ড ব্যবহার করে opacity , display এবং overlay অ্যানিমেট করুন যেখানে discrete বৈশিষ্ট্যগুলি স্থানান্তরিত হতে পারে।

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

পপওভার ছিল গল্পের শুরু মাত্র। একটি অত্যন্ত উত্তেজনাপূর্ণ আপডেট হল যে অ্যাঙ্কর পজিশনিংয়ের জন্য সমর্থন এখন Chrome 125 থেকে উপলব্ধ।

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

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

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

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

অথবা, anchor ফাংশনে সরাসরি anchor-name ব্যবহার করুন, এবং position-anchor প্রোপার্টিটি এড়িয়ে যান। একাধিক এলিমেন্টে anchor করার সময় এটি কার্যকর হতে পারে।

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

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

অবশেষে, অবস্থানকৃত উপাদানটিকে তার অ্যাঙ্কারের সাথে কেন্দ্রীভূত করতে justify এবং align বৈশিষ্ট্যের জন্য new anchor-center কীওয়ার্ড ব্যবহার করুন।

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

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

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

এই উদাহরণে left , right , এবং bottom এর ভৌত বৈশিষ্ট্য ব্যবহার করে anchor পজিশন সেট আপ করার জন্য 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 পজিশনিং

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

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

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

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

আপনি এই পজিশনাল মানগুলিকে স্প্যান কীওয়ার্ডের সাথে একত্রিত করে কেন্দ্র অবস্থান থেকে শুরু করতে পারেন এবং বাম দিকে স্প্যান, ডানদিকে স্প্যান, অথবা সমস্ত স্প্যান ব্যবহার করে উপলব্ধ কলাম বা সারিগুলির সম্পূর্ণ সেট দখল করতে পারেন। আপনি লজিক্যাল বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন। এই লেআউট প্রক্রিয়াটি কল্পনা করা এবং বাছাই করা সহজ করার জন্য, 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;

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

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

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

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

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

পপওভার API-এর পরবর্তী পদক্ষেপ হিসেবে, আমরা 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 একসাথে ব্যবহার করে, টিমটি অবশেষে একটি কাস্টমাইজেবল সিলেক্ট ড্রপডাউন সক্ষম করার ক্ষেত্রে অগ্রগতি অর্জন করেছে। ভালো খবর হল যে অনেক অগ্রগতি হয়েছে। খারাপ খবর হল যে এই APIটি এখনও পরীক্ষামূলক অবস্থায় রয়েছে। তবে, আমি আমাদের অগ্রগতি সম্পর্কে কিছু লাইভ ডেমো এবং আপডেট শেয়ার করতে আগ্রহী এবং আশা করি আপনার কিছু প্রতিক্রিয়া পাব। প্রথমত, ব্যবহারকারীদের নতুন, কাস্টমাইজেবল সিলেক্ট অভিজ্ঞতায় কীভাবে অপ্ট করা যায় সে বিষয়ে অগ্রগতি হয়েছে। এটি করার বর্তমান, কাজ-অগ্রগতিশীল উপায় হল CSS-এ একটি appearance সম্পত্তি ব্যবহার করা, appearance: base-select এ সেট করা আছে। appearance সেট হয়ে গেলে, আপনি একটি নতুন, কাস্টমাইজেবল সিলেক্ট অভিজ্ঞতায় অপ্ট-ইন করবেন।

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>

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

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

লাইভ ডেমো

selectedoption .text {
  display: none;
}

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

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

এক্সক্লুসিভ অ্যাকর্ডিয়ন

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

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

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

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-* ফর্ম ভ্যালিডেশন pseudo-elements ব্যবহার সম্পর্কে আরও জানুন।

field-sizing: content

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

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

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

<hr> <select>

selects-এ <hr> অথবা অনুভূমিক নিয়ম উপাদান সক্রিয় করার ক্ষমতা আরেকটি ছোট কিন্তু কার্যকর উপাদান বৈশিষ্ট্য। যদিও এর খুব বেশি অর্থপূর্ণ ব্যবহার নেই, এটি আপনাকে একটি select তালিকার মধ্যে সুন্দরভাবে কন্টেন্ট আলাদা করতে সাহায্য করে, বিশেষ করে এমন কন্টেন্ট যা আপনি অগত্যা একটি optgroup দিয়ে গ্রুপ করতে চান না, যেমন একটি প্লেসহোল্ডার মান।

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

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

<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>

select-এ hr ব্যবহার সম্পর্কে আরও জানুন।

জীবনযাত্রার মান উন্নয়ন

আমরা ক্রমাগত পুনরাবৃত্তি করছি, এবং এটি কেবল মিথস্ক্রিয়া এবং উপাদানগুলির জন্য নয়। গত বছরে জীবনের মান সম্পর্কে আরও অনেক আপডেট এসেছে।

নজরদারি সহ বাসা বাঁধছে

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

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 এর মধ্যে উল্লম্ব সেন্টারিংয়ের মতো কাজ করতে পারবেন, যা আপনি সেই লেআউট অ্যালগরিদম থেকে নাও পেতে পারেন।

স্ক্রিনশট

লাইভ ডেমো

div {
  align-content: center;
}

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

লেআউটের কথা বলতে গেলে, text-wrap: balance এবং pretty . text-wrap: balance যোগ করার মাধ্যমে text layout-এ একটি চমৎকার উন্নতি হয়েছে, যেখানে text-wrap: pretty টেক্সটের শেষ লাইনে সিঙ্গেলটন কমানোর উপর জোর দেয়।

h1 {
  text-wrap: balance;
}

টেক্সট-র‍্যাপ: ব্যালেন্স সম্পর্কে আরও জানুন।

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

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

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

আপেক্ষিক রঙের বাক্য গঠন

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

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

: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() ফাংশন

light-dark() ফাংশনের সাথে সাথে, থিমিং অনেক বেশি গতিশীল এবং সরলীকৃত হয়ে উঠেছে।

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() নির্বাচক

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”

কন্টেইনার কোয়েরি

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.