ওয়েব UI-তে নতুন কি: I/O 2025 রিক্যাপ

Una Kravets

প্রকাশিত: ১৪ আগস্ট, ২০২৫

গুগল আই/ও ইভেন্টের মরসুম শেষ হতে চলেছে, তাই এই পোস্টে এ বছর আমাদের ইভেন্টগুলিতে শেয়ার করা CSS এবং ওয়েব UI-এর সেরা হাইলাইটগুলি তুলে ধরা হলো।

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

ক্রোম টিম, অন্যান্য ব্রাউজার ভেন্ডর, CSSWG ও WHATWG-এর মতো স্ট্যান্ডার্ড সংস্থা এবং Open UI-এর মতো কমিউনিটি গ্রুপের সহযোগিতায়, এই মৌলিক UI প্যাটার্নগুলোকে বাস্তবায়নের জন্য সত্যিকার অর্থে সহজবোধ্য করে তোলার ওপর মনোযোগ দিচ্ছে।

কাস্টমাইজযোগ্য নির্বাচন মেনু

ফর্মের জন্য <select> এলিমেন্টটি অপরিহার্য, কিন্তু ঐতিহাসিকভাবে এর অভ্যন্তরীণ কাঠামো ব্রাউজার দ্বারা আড়াল করা থাকে, যার ফলে সামঞ্জস্যপূর্ণ এবং পূর্ণাঙ্গ CSS স্টাইলিং প্রায় অসম্ভব হয়ে পড়ে। একটি উন্নততর <select> তৈরি করতে হলে এর মূল উপাদানগুলো—পপওভার এপিআই (Popover API) এবং সিএসএস অ্যাঙ্কর পজিশনিং এপিআই (CSS Anchor Positioning API)—সম্পর্কে ধারণা থাকা প্রয়োজন।

পপওভার এপিআই: এখন বেসলাইনে

একটি কাস্টম ড্রপ-ডাউনের জন্য এমন একটি ভাসমান অপশন বক্স প্রয়োজন, যা অন্য সব UI এলিমেন্টের উপরে প্রদর্শিত হবে, সহজেই বন্ধ করা যাবে এবং সঠিকভাবে ফোকাস নিয়ন্ত্রণ করবে। Popover API এই সবকিছুই সামলায়, এবং এই বছর থেকে এটি 'বেসলাইন নিউলি অ্যাভেইলেবল' স্ট্যাটাসে পৌঁছেছে, যার অর্থ হলো এটি প্রতিটি প্রধান ব্রাউজারে স্থিতিশীল।

একটি পপওভার তৈরি করতে দুটি অংশের প্রয়োজন হয়: একটি ট্রিগার এলিমেন্ট (যেমন একটি <button> ) এবং পপওভার এলিমেন্টটি নিজে। পপওভারটিকে একটি id এবং [popover] অ্যাট্রিবিউট দিয়ে এদেরকে সংযুক্ত করুন, এবং তারপর বাটনটির [popovertarget] অ্যাট্রিবিউটে সেই id রেফারেন্স হিসেবে ব্যবহার করুন।

পপওভার এপিআই এলিমেন্টের সম্পূর্ণ জীবনচক্র পরিচালনা করে এবং নিম্নলিখিত পরিষেবা প্রদান করে:

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

<dialog> এলিমেন্টটি আপগ্রেড পেয়েছে

পপওভার শক্তিশালী হলেও, এটি সবসময় সঠিক পছন্দ নয়। উদাহরণস্বরূপ, পেজ-ব্লকিং ইন্টারঅ্যাকশনের ক্ষেত্রে যেখানে ব্যবহারকারীর মতামতের প্রয়োজন হয়, সেখানে একটি মোডাল <dialog> বেশি উপযুক্ত।

ঐতিহাসিকভাবে, <dialog> [popover] -এর কিছু সুবিধার অভাব ছিল, কিন্তু সেই অবস্থার পরিবর্তন হচ্ছে। নতুন closedby="any" অ্যাট্রিবিউটের ফলে, মোডাল ডায়ালগগুলো এখন লাইট ডিসমিস কার্যকারিতা সমর্থন করে, যার ফলে ব্যবহারকারী বাইরে ক্লিক করলে বা Escape কী চাপলে এটি বন্ধ হয়ে যায়।

এছাড়াও, কমান্ড ইনভোকার ( [command] এবং [commandfor] ) একটি বাটনকে কোনো অ্যাকশনের সাথে সংযুক্ত করার জন্য একটি ডিক্লারেটিভ, জাভাস্ক্রিপ্ট-মুক্ত উপায় প্রদান করে, যেমন command="show-modal" ব্যবহার করে একটি ডায়ালগ খোলা।

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

একবার একটি পপওভার প্রদর্শিত হলে, যে এলিমেন্টটি এটিকে খুলেছে তার সাপেক্ষে এটিকে পজিশন করতে হয়। জাভাস্ক্রিপ্ট দিয়ে ম্যানুয়ালি এটি গণনা করা ঝুঁকিপূর্ণ এবং পারফরম্যান্সের ক্ষতি করতে পারে।

ক্রোম ১২৫ থেকে, আপনি CSS অ্যাঙ্কর পজিশনিং এপিআই (CSS Anchor Positioning API) ব্যবহার করতে পারবেন। এই নতুন ফিচারটি ডিক্লারেটিভভাবে একটি এলিমেন্টকে অন্যটির সাথে যুক্ত করে এবং স্ক্রিনের প্রান্তের কাছাকাছি এলে স্বয়ংক্রিয়ভাবে এর অবস্থান পরিবর্তন করে। এই ফিচারটি ইন্টারঅপ ২০২৫ (Interop 2025) -এর একটি অংশ, যা বহুল-অনুরোধিত ফিচারগুলো অন্তর্ভুক্ত করার জন্য একটি ক্রস-ব্রাউজার উদ্যোগ। এর অর্থ হলো, আমরা আশা করতে পারি যে ২০২৫ সালের শেষ নাগাদ এটি সমস্ত প্রধান ব্রাউজারে চলে আসবে।

যদিও আপনি anchor-name এবং position-anchor প্রপার্টি ব্যবহার করে এলিমেন্টগুলোকে স্পষ্টভাবে লিঙ্ক করতে পারেন, স্পেসিফিকেশন এবং Chrome 133- এর একটি আপডেট একটি <popover> এবং এটিকে কল করা <button> এর মধ্যে একটি অন্তর্নিহিত অ্যাঙ্কর সম্পর্ক তৈরি করে। এটি কোডকে অনেক সহজ করে দেয়, এবং এর মানে হলো আপনি এখন CSS-এর একটি মাত্র লাইন দিয়ে পপওভারের অবস্থান ঠিক করতে পারবেন, যেমন: position-area: bottom span-left ।

chrome.dev-এর অ্যাঙ্কর টুলটি আপনাকে দেখায় কিভাবে position-area ব্যবহার করে আপনার পছন্দসই অবস্থানটি পেতে পারেন:

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

সত্যিকারের কাস্টমাইজযোগ্য <select>

পূর্ববর্তী সংস্করণগুলিতে এই ভিত্তিগুলো থাকার ফলে, অবশেষে ক্রোম ১৩৪-এ <select> এলিমেন্টের জন্য ওয়েব-নেটিভ স্টাইলিং যুক্ত হয়েছে। এর মধ্যে রয়েছে একটি নতুন appearance প্রপার্টি, নতুন সিউডো-এলিমেন্ট এবং <selectedcontent> এলিমেন্ট।

কাস্টমাইজেশন আনলক করতে, <select> এলিমেন্ট এবং এর নতুন ::picker(select) সিউডো-এলিমেন্টে appearance: base-select; প্রয়োগ করুন, যা অপশনগুলোর ড্রপ-ডাউন তালিকাটিকে টার্গেট করে। এর ফলে স্টাইলিংয়ের জন্য নতুন অভ্যন্তরীণ অংশগুলো উন্মুক্ত হয়, যার মধ্যে রয়েছে:

• <selectedcontent> : বাটনে প্রদর্শিত নির্বাচিত অপশনের বিষয়বস্তুকে বোঝায়।
• ::picker-icon : ড্রপ-ডাউন তীর আইকন
• <option>:checked এবং ::checkmark : নির্বাচিত অপশন এবং তার চেকমার্ক নির্দেশককে স্টাইল করার জন্য।

এর ফলে অপশনগুলোর মধ্যে সমৃদ্ধ কন্টেন্ট রাখা যায় এবং ডিসপ্লের ওপর সূক্ষ্ম নিয়ন্ত্রণ রাখা সম্ভব হয়। উদাহরণস্বরূপ, আপনি অপশন লিস্টে একটি আইকন ও সাবটাইটেল দেখাতে পারেন, কিন্তু selectedcontent মধ্যে display: none ব্যবহার করে সেগুলোকে বন্ধ অবস্থায় লুকিয়ে ফেলতে পারেন।

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

ক্যারোসেল

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

স্ক্রোলার দিয়ে শুরু করা

একটি ক্যারোসেল তৈরি করতে, আপনাকে এমন একটি আইটেমের তালিকা দিয়ে শুরু করতে হবে যা তার কন্টেইনারকে ছাপিয়ে যায়। কন্টেন্টকে স্ক্রলযোগ্য রেখে হরাইজন্টাল স্ক্রলবারটি লুকানোর জন্য, scrollbar-width: none ব্যবহার করুন। এছাড়াও, স্ক্রলারটিকে আরও দ্রুত ও সাবলীল করতে scroll-snap-type এবং scroll-snap-align প্রয়োগ করুন, যা নিশ্চিত করে যে ব্যবহারকারী স্ক্রল করার সাথে সাথে আইটেমগুলো যথাস্থানে বসে যায়।

::scroll-button

ক্রোম ১৩৫-এ যুক্ত হওয়া নতুন ::scroll-button() সিউডো-এলিমেন্টটি ব্রাউজারকে স্টেটফুল ও অ্যাক্সেসিবল 'নেক্সট' এবং 'প্রিভিয়াস' বাটন তৈরি করতে নির্দেশ দেয়। ব্রাউজারটি স্বয়ংক্রিয়ভাবে সঠিক ARIA রোল ও ট্যাবের ক্রম পরিচালনা করে এবং এমনকি আপনি শুরু বা শেষে পৌঁছালে বাটনগুলো নিষ্ক্রিয় করে দেয়—এই সবকিছুই কোনো অতিরিক্ত জাভাস্ক্রিপ্ট ছাড়াই সম্পন্ন হয়।

স্ক্রল বাটনগুলো চালু করতে, সেগুলোতে কন্টেন্ট এবং একটি অ্যাক্সেসিবল লেবেল দিন, যেমনটা নিচে দেখানো হয়েছে:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

এই বাটনগুলোকে স্টাইল করতে এবং এদের প্যারেন্ট ক্যারোসেলের সাপেক্ষে অবস্থান ঠিক করতে CSS অ্যাঙ্কর পজিশনিং ব্যবহার করুন, যা এই কাজটি করার জন্য প্রস্তাবিত পদ্ধতি।

::scroll-marker ব্যবহার করে সরাসরি নেভিগেশন

ডট ইন্ডিকেটর বা থাম্বনেইলের জন্য, ::scroll-marker এবং ::scroll-marker-group সিউডো-এলিমেন্টগুলো আপনার স্ক্রল কন্টেইনারের আইটেমগুলোর সাথে সরাসরি ন্যাভিগেশন মার্কার যুক্ত করে। ব্রাউজার এই গ্রুপটিকে একটি tablist মতো বিবেচনা করে এবং কিবোর্ড ন্যাভিগেশন পরিচালনা করে।

স্ক্রল বাটনের মতোই, content প্রপার্টি ব্যবহার করে স্ক্রল মার্কারগুলো চালু করুন এবং একটি অ্যাক্সেসিবল লেবেল দিন। নিচের উদাহরণে, স্ক্রল মার্কারের লেবেল সেট করার জন্য একটি `data` অ্যাট্রিবিউট ব্যবহার করা হয়েছে। এছাড়াও, `scroll- scroll-marker-group প্রপার্টি ব্যবহার করে স্ক্রল মার্কারগুলোকে ::scroll-marker-group এর মধ্যে স্থাপন করুন। সবশেষে, নতুন :target-current সিউডো-ক্লাস ব্যবহার করে সক্রিয় মার্কারটিকে স্টাইল করুন। একটি সাধারণ ক্যারোসেলের ক্ষেত্রে এটি দেখতে কেমন হতে পারে তার একটি উদাহরণ নিচে দেওয়া হলো:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

স্ক্রোল-অবস্থা কোয়েরি

স্ক্রল-সম্পর্কিত নতুন CSS ফিচারগুলো আপনাকে আরও ডাইনামিক এবং ইন্টারেক্টিভ ক্যারোসেল তৈরি করতে দেয়। স্ক্রল-স্টেট কোয়েরি হলো একটি নতুন মিডিয়া কোয়েরি যা একটি স্ক্রলারের অবস্থার উপর ভিত্তি করে প্রয়োগ হয়। তিন ধরনের স্ক্রল-স্টেট কোয়েরি রয়েছে, যেগুলো একটি @container স্টেটমেন্টে scroll-state() ব্যবহার করে অ্যাক্সেস করা যায়। সেগুলো হলো:

• scroll-state(snapped) : যখন কোনো এলিমেন্ট "snapped" অবস্থানে থাকে, তখন এটি প্রযোজ্য হয়। ক্যারোসেলের ক্ষেত্রে, এটি তখন হয় যখন এলিমেন্টটি ক্যারোসেলের কেন্দ্রে স্ন্যাপ করা থাকে।
• scroll-state(stuck) : কোনো এলিমেন্টের (যেমন হেডার) প্যারেন্ট স্টিকি হয়ে গেলে, সেই এলিমেন্টকে স্টাইল করুন।
• scroll-state(scrollable) : আরও কন্টেন্ট স্ক্রল করার জন্য আছে তা দেখানোর জন্য, ফেড-এর মতো ভিজ্যুয়াল ইন্ডিকেটর যোগ করুন।

সবকিছু একসাথে আনা

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

এই ইন্টারেক্টিভ ক্যারোসেলটি scroll-state() কোয়েরি, ::scroll-button , ::scroll-marker , CSS অ্যাঙ্কর পজিশনিং এবং :target-current এর সমন্বয়ে গঠিত।

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

সিএসএস ক্যারোসেল সম্পর্কে আরও জানুন।

ইন্টারেক্টিভ হোভারকার্ড

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

[interestfor] সহ আগ্রহ-চালিত পপওভার

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

একটি ক্লিক-ভিত্তিক পপওভারকে আগ্রহ-ভিত্তিক পপওভারে রূপান্তর করতে, একটি আহ্বানকারী এলিমেন্ট তৈরি করুন, যা একটি <button> বা <a> হতে পারে, এবং এটিকে একটি [interestfor] অ্যাট্রিবিউট দিন যা [popover] এলিমেন্টের id এর সমান হবে। HTML-এ এটি দেখতে এইরকম:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

ব্রাউজারটি সমস্ত জটিল ইভেন্ট লজিক পরিচালনা করে, যার মধ্যে অন্তর্ভুক্ত রয়েছে:

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

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

স্টাইলিং আগ্রহ জাগানো

ইন্টারেস্ট ইনভোকারগুলোতে কিছু নতুন সক্ষমতা যুক্ত হয়েছে। এর মধ্যে একটি হলো interest-target-delay নামক একটি CSS প্রপার্টি ব্যবহার করে এন্ট্রি এবং এক্সিট ডিলে নিয়ন্ত্রণ করার ক্ষমতা। অন্যটি হলো :has-interest সিউডো-ক্লাস ব্যবহার করে ইনভোকিং এলিমেন্টটির আগ্রহ আছে কি নেই, তার উপর ভিত্তি করে সেটিকে স্টাইল করার ক্ষমতা।

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" এবং বহু-কার্যকরী UI

আগ্রহ জাগানোর ক্ষেত্রে একটি গুরুত্বপূর্ণ বিষয় হলো নতুন এক ধরনের পপওভার: popover="hint" । অন্যান্য পপওভার থেকে এর প্রধান পার্থক্য হলো, একটি হিন্ট পপওভার খোলার সময় অন্য পপওভারগুলো বন্ধ করে না। এটি টুলটিপ বা প্রিভিউ কার্ডের জন্য আদর্শ, যা আগে থেকে খোলা কোনো মেনু বা চ্যাট উইন্ডো বন্ধ না করেই দেখানো উচিত।

এর মাধ্যমে আপনি ডিক্লারেটিভভাবে শক্তিশালী ও বহু-কার্যকরী UI তৈরি করতে পারবেন। এখন একটিমাত্র বাটনের প্রধান ক্লিক অ্যাকশনের জন্য (যেমন নোটিফিকেশন প্যানেল খোলা) popovertarget ব্যবহার করে একটি অটো পপওভার এবং পয়েন্টার-হোভার করার সময় একটি সহায়ক টুলটিপ দেখানোর জন্য ইন্টারেস্ট ইনভোকড হিন্ট পপওভার থাকতে পারে।

ভবিষ্যৎ ঘোষণামূলক

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

অতিরিক্ত তথ্যসূত্র:

• পপওভার এপিআই
• অ্যাঙ্কর পজিশনিং
• অ্যাঙ্কর টুল
• কমান্ড আহ্বানকারী
• কাস্টমাইজযোগ্য নির্বাচন মেনু (RFC)
• সিএসএস ক্যারোসেল
• সিএসএস ক্যারোসেল গ্যালারি
• সিএসএস ক্যারোসেল কনফিগুরেটর
• CSS স্ক্রোল-অবস্থা কোয়েরি
• আগ্রহ সৃষ্টিকারী ব্যাখ্যাকারী