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

Una Kravets

প্রকাশিত: আগস্ট 14, 2025

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

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

Chrome টিম, অন্যান্য ব্রাউজার বিক্রেতাদের সাথে সহযোগিতায়, CSSWG এবং WHATWG-এর মতো স্ট্যান্ডার্ড সংস্থা এবং Open UI-এর মতো সম্প্রদায়ের গোষ্ঠীগুলি, এই মৌলিক UI প্যাটার্নগুলিকে বাস্তবে সহজবোধ্য করে তোলার উপর ফোকাস করছে৷

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

<select> উপাদানটি ফর্মের জন্য অপরিহার্য, কিন্তু এর অভ্যন্তরীণ কাঠামো ঐতিহাসিকভাবে ব্রাউজার দ্বারা রক্ষা করা হয়েছে, যার ফলে সামঞ্জস্যপূর্ণ এবং ব্যাপক CSS স্টাইলিং প্রায় অসম্ভব। একটি ভাল <select> তৈরি করতে এর বিল্ডিং ব্লকগুলি বোঝার প্রয়োজন - Popover API এবং CSS অ্যাঙ্কর পজিশনিং API।

Popover API: এখন বেসলাইনে

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

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

Popover API উপাদানটির সমগ্র জীবনচক্র পরিচালনা করে, প্রদান করে:

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

<dialog> উপাদানটি একটি আপগ্রেড পায়

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

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

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

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

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

Chrome 125 থেকে, আপনি CSS অ্যাঙ্কর পজিশনিং API ব্যবহার করতে পারেন। এই নতুন ক্ষমতাটি ঘোষণামূলকভাবে একটি উপাদানকে অন্যটির সাথে সংযুক্ত করে, যখন এটি স্ক্রিনের প্রান্তের কাছাকাছি আসে তখন স্বয়ংক্রিয়ভাবে পুনরায় অবস্থান পরিচালনা করে। এই বৈশিষ্ট্যটি Interop 2025- এর অংশ, একটি ক্রস-ব্রাউজার উদ্যোগ যাতে উচ্চ-অনুরোধ করা বৈশিষ্ট্যগুলি অবতরণ করা যায়, যার অর্থ আমরা আশা করতে পারি এটি 2025 সালের শেষ নাগাদ সমস্ত প্রধান ব্রাউজারে থাকবে৷

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

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

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

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

আগের সংস্করণগুলিতে সেই বিল্ডিং ব্লকগুলির সাথে, <select> উপাদানগুলির জন্য ওয়েব-নেটিভ স্টাইলিং অবশেষে Chrome 134-এ এসেছে। এর মধ্যে একটি নতুন appearance বৈশিষ্ট্য, নতুন ছদ্ম-উপাদান এবং <selectedcontent> উপাদান অন্তর্ভুক্ত রয়েছে।

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

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

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

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

ক্যারোসেল

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

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

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

একটি ::scroll-button সহ পূর্ববর্তী এবং পরবর্তী

নতুন ::scroll-button() pseudo-element, যা Chrome 135-এ এসেছে, ব্রাউজারকে স্টেটফুল, অ্যাক্সেসযোগ্য "পরবর্তী" এবং "আগের" বোতামগুলি তৈরি করতে বলে। ব্রাউজারটি স্বয়ংক্রিয়ভাবে সঠিক ARIA ভূমিকা, ট্যাব ক্রম পরিচালনা করে এবং এমনকি আপনি যখন শুরু বা শেষ পর্যন্ত পৌঁছান তখন বোতামগুলিকে অক্ষম করে—সবকিছু যোগ করা জাভাস্ক্রিপ্ট ছাড়াই৷

স্ক্রোল বোতামগুলি শুরু করতে, তাদের সামগ্রী এবং একটি অ্যাক্সেসযোগ্য লেবেল দিন, যেমন:

.carousel {

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

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

::scroll-marker সহ সরাসরি নেভিগেশন

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

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

.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 , সিএসএস অ্যাঙ্কর পজিশনিং এবং :target-current একত্রিত করে।

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

CSS Carousels সম্পর্কে আরও জানুন।

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

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

[interestfor] এর সাথে সুদ-ট্রিগার পপভার

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

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

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

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

ব্রাউজারটি সমস্ত জটিল ইভেন্ট লজিক পরিচালনা করে, সহ:

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

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

স্টাইলিং আগ্রহ invokers

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

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

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

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

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

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

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

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

আরও সম্পদ:

• Popover API
• অ্যাঙ্কর পজিশনিং
• অ্যাঙ্কর টুল
• কমান্ড আহবানকারীরা
• কাস্টমাইজযোগ্য নির্বাচন মেনু (RFC)
• CSS ক্যারোসেল
• CSS ক্যারোজেল গ্যালারি
• CSS ক্যারোজেল কনফিগারার
• CSS স্ক্রোল-স্টেট প্রশ্ন
• সুদ আহবানকারী ব্যাখ্যাকারী