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

Una Kravets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

একটি সত্যিকারের কাস্টমাইজেবল <select>

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

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

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

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

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

ক্যারোসেল

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

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

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

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

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

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

.carousel {

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

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

::scroll-marker দিয়ে সরাসরি নেভিগেশন

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

স্ক্রোল বোতামের মতো, content প্রপার্টি বেছে নিয়ে স্ক্রোল মার্কার শুরু করুন এবং একটি অ্যাক্সেসযোগ্য লেবেল প্রদান করুন। নিম্নলিখিত উদাহরণে, স্ক্রোল মার্কারের জন্য লেবেল সেট করতে একটি ডেটা অ্যাট্রিবিউট ব্যবহার করা হয়েছে। এছাড়াও, ::scroll-marker-group scroll-marker-group 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 , CSS অ্যাঙ্কর পজিশনিং এবং :target-current একত্রিত করে।

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

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

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

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

[interestfor] এর সাথে আগ্রহ-ট্রিগার করা পপওভার

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

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

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

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

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

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

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

স্টাইলিং ইন্টারেস্ট ইনভোকার

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

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

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

popover="hint" এবং বহুমুখী UI

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

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

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

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

আরও সম্পদ:

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