বিকাশকারী প্রতিক্রিয়ার জন্য অনুরোধ: কাস্টমাইজযোগ্য নির্বাচন

Una Kravets

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

এটা চেষ্টা করে দেখুন এবং আমাদের আপনার মতামত দিন

আপনার Chrome Canary- এর ইনস্টলটি 130 সংস্করণে আপডেট করা হয়েছে এবং আপনার পরীক্ষামূলক ওয়েব প্ল্যাটফর্মের বৈশিষ্ট্যগুলি ফ্ল্যাগ চালু আছে কিনা তা পরীক্ষা করুন৷ আপনি আপনার ঠিকানা বারে chrome://flags এ গিয়ে এবং #experimental-web-platform-features চালু করে এই পতাকাটি চালু করতে পারেন। তারপরে, আপনি এই পোস্টে কোডপেন ডেমো দেখতে সক্ষম হবেন। বিকল্পভাবে, আপনি এই কোডপেন সংগ্রহটি এক জায়গায় দেখতে পারেন।

বৈশিষ্ট্য সম্পর্কে প্রতিক্রিয়া প্রদান করতে এই ফর্মটি ব্যবহার করুন৷ এটি সম্পূর্ণ হতে মাত্র তিন মিনিট সময় লাগবে!

চলুন কাস্টমাইজেবল সিলেক্ট এপিআই-এর বৈশিষ্ট্যগুলিতে ডুব দেওয়া যাক, যা বিদ্যমান এইচটিএমএল নির্বাচন ট্যাগের উপর তৈরি করে।

নতুন <select> -এ অপ্ট-ইন করুন

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

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

select,
::picker(select) {
  appearance: base-select;
}

আপনি শুধুমাত্র ইন-পেজ বোতামটি বেছে নিতে পারেন, কিন্তু আপনি ইন-পেজ বোতামটি নির্বাচন না করে শুধুমাত্র পিকার পপওভারটি বেছে নিতে পারবেন না। ::picker(select) শুধুমাত্র একবার appearance: base-select <select> এ প্রয়োগ করা হয়।

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

যন্ত্রাংশ ভাঙ্গা

একবার আপনি নতুন কাস্টমাইজযোগ্য নির্বাচন মোডে চলে গেলে, আপনার কাছে এখন যে নতুন উপাদানগুলির অ্যাক্সেস রয়েছে তা অন্তর্ভুক্ত করার জন্য: - selectedoption : বর্তমানে নির্বাচিত বিকল্পটির অভ্যন্তরীণ HTML প্রতিফলিত করে। - option::before : একটি ডিফল্ট অ্যাক্সেসিবিলিটি সামর্থ্য হিসাবে বর্তমানে নির্বাচিত বিকল্পটি নির্দেশ করার জন্য একটি চেকমার্ক রয়েছে (এটি পরিবর্তন সাপেক্ষে)। - ::picker(select) : পপওভার যাতে একটি কাস্টমাইজযোগ্য নির্বাচনের ভিতরে button বাইরের সমস্ত সামগ্রী রয়েছে৷

আপনি নির্বাচনের যেকোনো অংশ স্টাইল করতে পারেন। উদাহরণ স্বরূপ, আপনি <option> উপাদানের মধ্যে ইচ্ছামত অ-ইন্টারেক্টিভ কন্টেন্ট যোগ করতে পারেন, ইন-পেজ বোতামটি স্টাইল করতে পারেন যা সিলেক্ট ড্রপ-ডাউন খোলে এবং বিকল্পগুলির ড্রপ-ডাউন তালিকাকে স্টাইল করতে পারেন ( ::picker(select) ) .

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

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

যদিও আপনার নির্বাচনের ভিতরে সীমাহীন সংখ্যক উপাদান থাকতে পারে, ব্রাউজার একটি <button> উপাদানের বাইরে যেকোনো কিছুকে ::picker(select) pseudo-element-এ বাকেট করবে, যা বোতামে নোঙর করা একটি পপওভার হিসাবে আচরণ করে। এই <button> ::picker(select) টগল করে। সরাসরি নির্বাচনের ভিতরের বিকল্প এবং অন্যান্য উপাদানগুলি ::picker(select) -এ উত্তোলন করা হবে, অথবা আপনি স্টাইলিং উদ্দেশ্যে আপনার নিজস্ব মোড়ক আনতে পারেন। এই মোড়কটিও ::picker(select) সিউডো-এলিমেন্টের ভিতরে স্থাপন করা হবে।

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

নতুন কাস্টমাইজযোগ্য <select> পপওভার এবং অ্যাঙ্কর পজিশনিং থেকে কার্যকারিতা ব্যবহার করে। এটি এই দুটি অন্তর্নিহিত প্রযুক্তির সাথে নির্মিত। এর মানে হল একটি নির্বাচনের মধ্যে ড্রপ-ডাউন বিকল্প তালিকা একটি পপওভার হিসাবে কাজ করে যা ট্রিগার বোতামে নোঙ্গর করা হয় যা নির্বাচনটি খুলবে।

আপনি স্টাইল করতে অ্যাঙ্কর পজিশনিং ব্যবহার করতে পারেন ::picker(select) পপওভার (এটিকে অন্যান্য উপাদানের সাথে নোঙ্গর করা সহ)। এই কন্টেন্ট মডেলের মানে হল যে টপ লেয়ার অ্যানিমেশন শৈলীগুলি এন্ট্রি এবং এক্সিট ইফেক্ট অ্যানিমেট করতে বিকল্প তালিকার সাথে কাজ করে।

বিদ্যমান <select> উপাদান উন্নত করুন

পূর্বে, Chrome টিম একটি <selectlist> উপাদানের ধারণা নিয়ে কাজ করছিল। এই পোস্টে যা বর্ণনা করা হয়েছে তা হল এর পরিবর্তে বিদ্যমান <select> উপাদানটিকে পুনরায় ব্যবহার করার জন্য বৈশিষ্ট্যটি পুনরায় ডিজাইন করা হয়েছে।

বিদ্যমান <select> উপাদানটি পুনরায় ব্যবহার করার মূল সুবিধাগুলির মধ্যে একটি হল মৌলিক HTML উপাদানকে ধীরে ধীরে উন্নত করার ক্ষমতা। একেবারে নতুন উপাদানের তুলনায়, <select> পুনঃব্যবহার করলেও আপনার পৃষ্ঠায় অর্থপূর্ণ সামগ্রী রেন্ডার হবে। নিম্নলিখিত উদাহরণটি একটি অ-সমর্থিত ব্রাউজারে ব্যবহারকারী কী দেখতে পাবে তার বিপরীতে কাস্টমাইজ করা নির্বাচন দেখায়:

মৌলিক স্টাইলিং

পরিবর্তনগুলি নির্বাচিত উপাদানটির ভিজ্যুয়াল স্টাইলিং হিসাবে সহজ হতে পারে। উদাহরণস্বরূপ, বোতাম শৈলী আপডেট করতে, হোভার এবং ফোকাস শৈলী, বা নির্বাচন বিকল্পগুলির পটভূমি। appearance: base-select , আপনার সিলেক্টের অংশগুলিতে আপনি যে কোনো CSS প্রয়োগ করতে চান।

তীর নির্দেশক কাস্টমাইজ করতে, নির্বাচনের ভিতরে আপনার নিজের বোতাম এবং তীর যোগ করুন।

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

তারপর, তীর স্টাইল করুন:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

বিকল্পের মধ্যে জটিল বিষয়বস্তু

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

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

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

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

নির্বাচিত বিকল্পটি স্টাইল করুন

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

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

এখন display: none পাঠ্য বিষয়বস্তু লুকাতে এবং শুধুমাত্র আইকন দেখাতে <selectedoption> ' এর ভিতরে .text এর উপর কোনটি নয়:

selectedoption .text {
  display: none;
}

ইন্টারেক্টিভ বিকল্প

::picker(select) এর স্টাইলিং এর উপর সম্পূর্ণ নিয়ন্ত্রণের সাথে, হোভার এবং ফোকাসে এটিকে ইন্টারেক্টিভ করতে আগের ডেমোতে তৈরি করুন। এই ডেমোতে, নতুন calc-size() ফাংশনটি পিকারের প্রস্থকে অ্যানিমেট করতে ব্যবহার করা হয় আইকনগুলি দেখানো থেকে হোভারে বিকল্পগুলির সম্পূর্ণ প্রস্থ দেখানো পর্যন্ত বা যদি নির্বাচনটিতে ফোকাস-দৃশ্যমান সহ একটি বিকল্প থাকে।

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

সীমাবদ্ধতা এবং অ্যাক্সেসযোগ্যতার নোট

মহান ক্ষমতা মহান দায়িত্ব আসে. জিনিসগুলি অ্যাক্সেসযোগ্য রাখতে বৈশিষ্ট্যটির কিছু সীমাবদ্ধতা রয়েছে।

• <option> উপাদানগুলি ছাড়া, কোনও ইন্টারেক্টিভ (ফোকাসযোগ্য) উপাদান এখনও <select> এর ভিতরে অনুমোদিত নয়, যেমন বোতাম বা অন্যান্য উপাদান। আপাতত, প্রস্তাবিত বিষয়বস্তু মডেল শুধুমাত্র <div> , <span> , <option> , <optgroup> , <img> , <svg> এবং <hr> উপাদানগুলির জন্য অনুমতি দেয়৷
• স্প্লিট বোতামগুলি বর্তমানে পরীক্ষামূলক পর্যায়ে রয়েছে কারণ আমরা একটি অ্যাক্সেসযোগ্য সমাধান নিয়ে কাজ করি৷

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

উপসংহার

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

এবং যখন এই বৈশিষ্ট্যটি এখনও বিকাশে রয়েছে, আমরা এই সংক্ষিপ্ত প্রতিক্রিয়া ফর্মটির মাধ্যমে আপনার প্রতিক্রিয়া শুনতে চাই৷

আমরা এটির অধিকার পেয়েছি এবং ওয়েবে অ্যাক্সেসযোগ্য, কাস্টমাইজযোগ্য ফর্ম নিয়ন্ত্রণগুলি তৈরি করা আরও সহজ করে তোলার জন্য আপনাকে ধন্যবাদ!

Una Kravets

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

এটা চেষ্টা করে দেখুন এবং আমাদের আপনার মতামত দিন

আপনার Chrome Canary- এর ইনস্টলটি 130 সংস্করণে আপডেট করা হয়েছে এবং আপনার পরীক্ষামূলক ওয়েব প্ল্যাটফর্মের বৈশিষ্ট্যগুলি ফ্ল্যাগ চালু আছে কিনা তা পরীক্ষা করুন৷ আপনি আপনার ঠিকানা বারে chrome://flags এ গিয়ে এবং #experimental-web-platform-features চালু করে এই পতাকাটি চালু করতে পারেন। তারপরে, আপনি এই পোস্টে কোডপেন ডেমো দেখতে সক্ষম হবেন। বিকল্পভাবে, আপনি এই কোডপেন সংগ্রহটি এক জায়গায় দেখতে পারেন।

বৈশিষ্ট্য সম্পর্কে প্রতিক্রিয়া প্রদান করতে এই ফর্মটি ব্যবহার করুন৷ এটি সম্পূর্ণ হতে মাত্র তিন মিনিট সময় লাগবে!

চলুন কাস্টমাইজেবল সিলেক্ট এপিআই-এর বৈশিষ্ট্যগুলিতে ডুব দেওয়া যাক, যা বিদ্যমান এইচটিএমএল নির্বাচন ট্যাগের উপর তৈরি করে।

নতুন <select> -এ অপ্ট-ইন করুন

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

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

select,
::picker(select) {
  appearance: base-select;
}

আপনি শুধুমাত্র ইন-পেজ বোতামটি বেছে নিতে পারেন, কিন্তু আপনি ইন-পেজ বোতামটি নির্বাচন না করে শুধুমাত্র পিকার পপওভারটি বেছে নিতে পারবেন না। ::picker(select) শুধুমাত্র একবার appearance: base-select <select> এ প্রয়োগ করা হয়।

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

যন্ত্রাংশ ভাঙ্গা

একবার আপনি নতুন কাস্টমাইজযোগ্য নির্বাচন মোডে চলে গেলে, আপনার কাছে এখন যে নতুন উপাদানগুলির অ্যাক্সেস রয়েছে তা অন্তর্ভুক্ত করার জন্য: - selectedoption : বর্তমানে নির্বাচিত বিকল্পটির অভ্যন্তরীণ HTML প্রতিফলিত করে। - option::before : একটি ডিফল্ট অ্যাক্সেসিবিলিটি সামর্থ্য হিসাবে বর্তমানে নির্বাচিত বিকল্পটি নির্দেশ করার জন্য একটি চেকমার্ক রয়েছে (এটি পরিবর্তন সাপেক্ষে)। - ::picker(select) : পপওভার যাতে একটি কাস্টমাইজযোগ্য নির্বাচনের ভিতরে button বাইরের সমস্ত সামগ্রী রয়েছে৷

আপনি নির্বাচনের যেকোনো অংশ স্টাইল করতে পারেন। উদাহরণ স্বরূপ, আপনি <option> উপাদানের মধ্যে ইচ্ছামত অ-ইন্টারেক্টিভ কন্টেন্ট যোগ করতে পারেন, ইন-পেজ বোতামটি স্টাইল করতে পারেন যা সিলেক্ট ড্রপ-ডাউন খোলে এবং বিকল্পগুলির ড্রপ-ডাউন তালিকাকে স্টাইল করতে পারেন ( ::picker(select) ) .

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

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

যদিও আপনার নির্বাচনের ভিতরে সীমাহীন সংখ্যক উপাদান থাকতে পারে, ব্রাউজার একটি <button> উপাদানের বাইরে যেকোনো কিছুকে ::picker(select) pseudo-element-এ বাকেট করবে, যা বোতামে নোঙর করা একটি পপওভার হিসাবে আচরণ করে। এই <button> ::picker(select) টগল করে। সরাসরি নির্বাচনের ভিতরের বিকল্প এবং অন্যান্য উপাদানগুলি ::picker(select) -এ উত্তোলন করা হবে, অথবা আপনি স্টাইলিং উদ্দেশ্যে আপনার নিজস্ব মোড়ক আনতে পারেন। এই মোড়কটিও ::picker(select) সিউডো-এলিমেন্টের ভিতরে স্থাপন করা হবে।

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

নতুন কাস্টমাইজযোগ্য <select> পপওভার এবং অ্যাঙ্কর পজিশনিং থেকে কার্যকারিতা ব্যবহার করে। এটি এই দুটি অন্তর্নিহিত প্রযুক্তির সাথে নির্মিত। এর মানে হল একটি নির্বাচনের মধ্যে ড্রপ-ডাউন বিকল্প তালিকা একটি পপওভার হিসাবে কাজ করে যা ট্রিগার বোতামে নোঙ্গর করা হয় যা নির্বাচনটি খুলবে।

আপনি স্টাইল করতে অ্যাঙ্কর পজিশনিং ব্যবহার করতে পারেন ::picker(select) পপওভার (এটিকে অন্যান্য উপাদানের সাথে নোঙ্গর করা সহ)। এই কন্টেন্ট মডেলের মানে হল যে টপ লেয়ার অ্যানিমেশন শৈলীগুলি এন্ট্রি এবং এক্সিট ইফেক্ট অ্যানিমেট করতে বিকল্প তালিকার সাথে কাজ করে।

বিদ্যমান <select> উপাদান উন্নত করুন

পূর্বে, Chrome টিম একটি <selectlist> উপাদানের ধারণা নিয়ে কাজ করছিল। এই পোস্টে যা বর্ণনা করা হয়েছে তা হল এর পরিবর্তে বিদ্যমান <select> উপাদানটিকে পুনরায় ব্যবহার করার জন্য বৈশিষ্ট্যটি পুনরায় ডিজাইন করা হয়েছে।

বিদ্যমান <select> উপাদানটি পুনরায় ব্যবহার করার মূল সুবিধাগুলির মধ্যে একটি হল মৌলিক HTML উপাদানকে ধীরে ধীরে উন্নত করার ক্ষমতা। একেবারে নতুন উপাদানের তুলনায়, <select> পুনঃব্যবহার করলেও আপনার পৃষ্ঠায় অর্থপূর্ণ সামগ্রী রেন্ডার হবে। নিম্নলিখিত উদাহরণটি একটি অ-সমর্থিত ব্রাউজারে ব্যবহারকারী কী দেখতে পাবে তার বিপরীতে কাস্টমাইজ করা নির্বাচন দেখায়:

মৌলিক স্টাইলিং

পরিবর্তনগুলি নির্বাচিত উপাদানটির ভিজ্যুয়াল স্টাইলিং হিসাবে সহজ হতে পারে। উদাহরণস্বরূপ, বোতাম শৈলী আপডেট করতে, হোভার এবং ফোকাস শৈলী, বা নির্বাচন বিকল্পগুলির পটভূমি। appearance: base-select , আপনার সিলেক্টের অংশগুলিতে আপনি যে কোনো CSS প্রয়োগ করতে চান।

তীর নির্দেশক কাস্টমাইজ করতে, নির্বাচনের ভিতরে আপনার নিজের বোতাম এবং তীর যোগ করুন।

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

তারপর, তীর স্টাইল করুন:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

বিকল্পের মধ্যে জটিল বিষয়বস্তু

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

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

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

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

নির্বাচিত বিকল্পটি স্টাইল করুন

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

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

এখন display: none পাঠ্য বিষয়বস্তু লুকাতে এবং শুধুমাত্র আইকন দেখাতে <selectedoption> ' এর ভিতরে .text এর উপর কোনটি নয়:

selectedoption .text {
  display: none;
}

ইন্টারেক্টিভ বিকল্প

::picker(select) এর স্টাইলিং এর উপর সম্পূর্ণ নিয়ন্ত্রণের সাথে, হোভার এবং ফোকাসে এটিকে ইন্টারেক্টিভ করতে আগের ডেমোতে তৈরি করুন। এই ডেমোতে, নতুন calc-size() ফাংশনটি পিকারের প্রস্থকে অ্যানিমেট করতে ব্যবহার করা হয় আইকনগুলি দেখানো থেকে হোভারে বিকল্পগুলির সম্পূর্ণ প্রস্থ দেখানো পর্যন্ত বা যদি নির্বাচনটিতে ফোকাস-দৃশ্যমান সহ একটি বিকল্প থাকে।

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

সীমাবদ্ধতা এবং অ্যাক্সেসযোগ্যতার নোট

মহান ক্ষমতা মহান দায়িত্ব আসে. জিনিসগুলি অ্যাক্সেসযোগ্য রাখতে বৈশিষ্ট্যটির কিছু সীমাবদ্ধতা রয়েছে।

• <option> উপাদানগুলি ছাড়া, কোনও ইন্টারেক্টিভ (ফোকাসযোগ্য) উপাদান এখনও <select> এর ভিতরে অনুমোদিত নয়, যেমন বোতাম বা অন্যান্য উপাদান। আপাতত, প্রস্তাবিত বিষয়বস্তু মডেল শুধুমাত্র <div> , <span> , <option> , <optgroup> , <img> , <svg> এবং <hr> উপাদানগুলির জন্য অনুমতি দেয়৷
• স্প্লিট বোতামগুলি বর্তমানে পরীক্ষামূলক পর্যায়ে রয়েছে কারণ আমরা একটি অ্যাক্সেসযোগ্য সমাধান নিয়ে কাজ করি৷

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

উপসংহার

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

এবং যখন এই বৈশিষ্ট্যটি এখনও বিকাশে রয়েছে, আমরা এই সংক্ষিপ্ত প্রতিক্রিয়া ফর্মটির মাধ্যমে আপনার প্রতিক্রিয়া শুনতে চাই৷

আমরা এটির অধিকার পেয়েছি এবং ওয়েবে অ্যাক্সেসযোগ্য, কাস্টমাইজযোগ্য ফর্ম নিয়ন্ত্রণগুলি তৈরি করা আরও সহজ করে তোলার জন্য আপনাকে ধন্যবাদ!

Una Kravets

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

এটা চেষ্টা করে দেখুন এবং আমাদের আপনার মতামত দিন

আপনার Chrome Canary- এর ইনস্টলটি 130 সংস্করণে আপডেট করা হয়েছে এবং আপনার পরীক্ষামূলক ওয়েব প্ল্যাটফর্মের বৈশিষ্ট্যগুলি ফ্ল্যাগ চালু আছে কিনা তা পরীক্ষা করুন৷ আপনি আপনার ঠিকানা বারে chrome://flags এ গিয়ে এবং #experimental-web-platform-features চালু করে এই পতাকাটি চালু করতে পারেন। তারপরে, আপনি এই পোস্টে কোডপেন ডেমো দেখতে সক্ষম হবেন। বিকল্পভাবে, আপনি এই কোডপেন সংগ্রহটি এক জায়গায় দেখতে পারেন।

বৈশিষ্ট্য সম্পর্কে প্রতিক্রিয়া প্রদান করতে এই ফর্মটি ব্যবহার করুন৷ এটি সম্পূর্ণ হতে মাত্র তিন মিনিট সময় লাগবে!

চলুন কাস্টমাইজেবল সিলেক্ট এপিআই-এর বৈশিষ্ট্যগুলিতে ডুব দেওয়া যাক, যা বিদ্যমান এইচটিএমএল নির্বাচন ট্যাগের উপর তৈরি করে।

নতুন <select> -এ অপ্ট-ইন করুন

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

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

select,
::picker(select) {
  appearance: base-select;
}

আপনি শুধুমাত্র ইন-পেজ বোতামটি বেছে নিতে পারেন, কিন্তু আপনি ইন-পেজ বোতামটি নির্বাচন না করে শুধুমাত্র পিকার পপওভারটি বেছে নিতে পারবেন না। ::picker(select) শুধুমাত্র একবার appearance: base-select <select> এ প্রয়োগ করা হয়।

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

যন্ত্রাংশ ভাঙ্গা

একবার আপনি নতুন কাস্টমাইজযোগ্য নির্বাচন মোডে চলে গেলে, আপনার কাছে এখন যে নতুন উপাদানগুলির অ্যাক্সেস রয়েছে তা অন্তর্ভুক্ত করার জন্য: - selectedoption : বর্তমানে নির্বাচিত বিকল্পটির অভ্যন্তরীণ HTML প্রতিফলিত করে। - option::before : একটি ডিফল্ট অ্যাক্সেসিবিলিটি সামর্থ্য হিসাবে বর্তমানে নির্বাচিত বিকল্পটি নির্দেশ করার জন্য একটি চেকমার্ক রয়েছে (এটি পরিবর্তন সাপেক্ষে)। - ::picker(select) : পপওভার যাতে একটি কাস্টমাইজযোগ্য নির্বাচনের ভিতরে button বাইরের সমস্ত সামগ্রী রয়েছে৷

আপনি নির্বাচনের যেকোনো অংশ স্টাইল করতে পারেন। উদাহরণ স্বরূপ, আপনি <option> উপাদানের মধ্যে ইচ্ছামত অ-ইন্টারেক্টিভ কন্টেন্ট যোগ করতে পারেন, ইন-পেজ বোতামটি স্টাইল করতে পারেন যা সিলেক্ট ড্রপ-ডাউন খোলে এবং বিকল্পগুলির ড্রপ-ডাউন তালিকাকে স্টাইল করতে পারেন ( ::picker(select) ) .

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

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

যদিও আপনার নির্বাচনের ভিতরে সীমাহীন সংখ্যক উপাদান থাকতে পারে, ব্রাউজার একটি <button> উপাদানের বাইরে যেকোনো কিছুকে ::picker(select) pseudo-element-এ বাকেট করবে, যা বোতামে নোঙর করা একটি পপওভার হিসাবে আচরণ করে। এই <button> ::picker(select) টগল করে। সরাসরি নির্বাচনের ভিতরের বিকল্প এবং অন্যান্য উপাদানগুলি ::picker(select) -এ উত্তোলন করা হবে, অথবা আপনি স্টাইলিং উদ্দেশ্যে আপনার নিজস্ব মোড়ক আনতে পারেন। এই মোড়কটিও ::picker(select) সিউডো-এলিমেন্টের ভিতরে স্থাপন করা হবে।

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

নতুন কাস্টমাইজযোগ্য <select> পপওভার এবং অ্যাঙ্কর পজিশনিং থেকে কার্যকারিতা ব্যবহার করে। এটি এই দুটি অন্তর্নিহিত প্রযুক্তির সাথে নির্মিত। এর মানে হল একটি নির্বাচনের মধ্যে ড্রপ-ডাউন বিকল্প তালিকা একটি পপওভার হিসাবে কাজ করে যা ট্রিগার বোতামে নোঙ্গর করা হয় যা নির্বাচনটি খুলবে।

আপনি স্টাইল করতে অ্যাঙ্কর পজিশনিং ব্যবহার করতে পারেন ::picker(select) পপওভার (এটিকে অন্যান্য উপাদানের সাথে নোঙ্গর করা সহ)। এই কন্টেন্ট মডেলের মানে হল যে টপ লেয়ার অ্যানিমেশন শৈলীগুলি এন্ট্রি এবং এক্সিট ইফেক্ট অ্যানিমেট করতে বিকল্প তালিকার সাথে কাজ করে।

বিদ্যমান <select> উপাদান উন্নত করুন

পূর্বে, Chrome টিম একটি <selectlist> উপাদানের ধারণা নিয়ে কাজ করছিল। এই পোস্টে যা বর্ণনা করা হয়েছে তা হল যে বৈশিষ্ট্যটি পরিবর্তে বিদ্যমান <select> উপাদানটিকে পুনরায় ব্যবহার করার জন্য পুনরায় ডিজাইন করা হয়েছে।

বিদ্যমান <select> উপাদানটি পুনরায় ব্যবহার করার মূল সুবিধাগুলির মধ্যে একটি হল মৌলিক HTML উপাদানকে ধীরে ধীরে উন্নত করার ক্ষমতা। একেবারে নতুন উপাদানের তুলনায়, <select> পুনঃব্যবহার করলেও আপনার পৃষ্ঠায় অর্থপূর্ণ সামগ্রী রেন্ডার হবে। নিম্নলিখিত উদাহরণটি একটি অ-সমর্থিত ব্রাউজারে ব্যবহারকারী কী দেখতে পাবে তার বিপরীতে কাস্টমাইজ করা নির্বাচন দেখায়:

মৌলিক স্টাইলিং

পরিবর্তনগুলি নির্বাচিত উপাদানটির ভিজ্যুয়াল স্টাইলিং হিসাবে সহজ হতে পারে। উদাহরণস্বরূপ, বোতাম শৈলী আপডেট করতে, হোভার এবং ফোকাস শৈলী, বা নির্বাচন বিকল্পগুলির পটভূমি। appearance: base-select , আপনার সিলেক্টের অংশগুলিতে আপনি যে কোনো CSS প্রয়োগ করতে চান।

তীর নির্দেশক কাস্টমাইজ করতে, নির্বাচনের ভিতরে আপনার নিজের বোতাম এবং তীর যোগ করুন।

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

তারপর, তীর স্টাইল করুন:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

বিকল্পের মধ্যে জটিল বিষয়বস্তু

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

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

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

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

নির্বাচিত বিকল্পটি স্টাইল করুন

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

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

এখন display: none পাঠ্য বিষয়বস্তু লুকাতে এবং শুধুমাত্র আইকন দেখাতে <selectedoption> ' এর ভিতরে .text এর উপর কোনটি নয়:

selectedoption .text {
  display: none;
}

ইন্টারেক্টিভ বিকল্প

::picker(select) এর স্টাইলিং এর উপর সম্পূর্ণ নিয়ন্ত্রণের সাথে, হোভার এবং ফোকাসে এটিকে ইন্টারেক্টিভ করতে আগের ডেমোতে তৈরি করুন। এই ডেমোতে, নতুন calc-size() ফাংশনটি পিকারের প্রস্থকে অ্যানিমেট করতে ব্যবহার করা হয় আইকনগুলি দেখানো থেকে হোভারে বিকল্পগুলির সম্পূর্ণ প্রস্থ দেখানো পর্যন্ত বা যদি নির্বাচনটিতে ফোকাস-দৃশ্যমান সহ একটি বিকল্প থাকে।

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

সীমাবদ্ধতা এবং অ্যাক্সেসযোগ্যতার নোট

মহান ক্ষমতা মহান দায়িত্ব আসে. জিনিসগুলি অ্যাক্সেসযোগ্য রাখতে বৈশিষ্ট্যটির কিছু সীমাবদ্ধতা রয়েছে।

• <option> উপাদানগুলি ছাড়া, কোনও ইন্টারেক্টিভ (ফোকাসযোগ্য) উপাদান এখনও <select> এর ভিতরে অনুমোদিত নয়, যেমন বোতাম বা অন্যান্য উপাদান। আপাতত, প্রস্তাবিত বিষয়বস্তু মডেল শুধুমাত্র <div> , <span> , <option> , <optgroup> , <img> , <svg> এবং <hr> উপাদানগুলির জন্য অনুমতি দেয়৷
• স্প্লিট বোতামগুলি বর্তমানে পরীক্ষামূলক পর্যায়ে রয়েছে কারণ আমরা একটি অ্যাক্সেসযোগ্য সমাধান নিয়ে কাজ করি৷

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

উপসংহার

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

এবং যখন এই বৈশিষ্ট্যটি এখনও বিকাশে রয়েছে, আমরা এই সংক্ষিপ্ত প্রতিক্রিয়া ফর্মটির মাধ্যমে আপনার প্রতিক্রিয়া শুনতে চাই৷

আমরা এটির অধিকার পেয়েছি এবং ওয়েবে অ্যাক্সেসযোগ্য, কাস্টমাইজযোগ্য ফর্ম নিয়ন্ত্রণগুলি তৈরি করা আরও সহজ করে তোলার জন্য আপনাকে ধন্যবাদ!

Una Kravets

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

এটা চেষ্টা করে দেখুন এবং আমাদের আপনার মতামত দিন

আপনার Chrome Canary- এর ইনস্টলটি 130 সংস্করণে আপডেট করা হয়েছে এবং আপনার পরীক্ষামূলক ওয়েব প্ল্যাটফর্মের বৈশিষ্ট্যগুলি ফ্ল্যাগ চালু আছে কিনা তা পরীক্ষা করুন৷ আপনি আপনার ঠিকানা বারে chrome://flags এ গিয়ে এবং #experimental-web-platform-features চালু করে এই পতাকাটি চালু করতে পারেন। তারপরে, আপনি এই পোস্টে কোডপেন ডেমো দেখতে সক্ষম হবেন। বিকল্পভাবে, আপনি এই কোডপেন সংগ্রহটি এক জায়গায় দেখতে পারেন।

বৈশিষ্ট্য সম্পর্কে প্রতিক্রিয়া প্রদান করতে এই ফর্মটি ব্যবহার করুন৷ এটি সম্পূর্ণ হতে মাত্র তিন মিনিট সময় লাগবে!

চলুন কাস্টমাইজেবল সিলেক্ট এপিআই-এর বৈশিষ্ট্যগুলিতে ডুব দেওয়া যাক, যা বিদ্যমান এইচটিএমএল নির্বাচন ট্যাগের উপর তৈরি করে।

নতুন <select> -এ অপ্ট-ইন করুন

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

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

select,
::picker(select) {
  appearance: base-select;
}

আপনি কেবল ইন-পৃষ্ঠার বোতামটি বেছে নিতে বেছে নিতে পারেন, তবে ইন-পেজ বোতামটি পছন্দ না করে আপনি কেবল পিকার পপওভারটি বেছে নিতে পারবেন না। ::picker(select) কেবল একবার appearance: base-select <select> এ প্রয়োগ করা হয়।

এখন আপনি আপনার নির্বাচিত উপাদানটি কাস্টমাইজ করতে প্রস্তুত। নতুন কাস্টমাইজযোগ্য নির্বাচনটি এমন কিছু ডিফল্ট শৈলীর সাথে আসে যা ব্রাউজার এবং অপারেটিং সিস্টেমগুলিতে একই দেখায়। ডিফল্ট কাস্টমাইজড সিলেক্টটি ম্যাকোসে ক্রোমে বিদ্যমান সিলেক্টের বিপরীতে দেখতে কেমন লাগে তা এখানে:

অংশগুলি ভেঙে ফেলা

একবার আপনি নতুন কাস্টমাইজযোগ্য নির্বাচন মোডে থাকলে, আপনার কাছে এখন নতুন উপাদানগুলির অ্যাক্সেস রয়েছে: - selectedoption : বর্তমানে নির্বাচিত বিকল্পটির অভ্যন্তরীণ এইচটিএমএল প্রতিফলিত করে। - option::before : বর্তমানে নির্বাচিত বিকল্পটিকে একটি ডিফল্ট অ্যাক্সেসিবিলিটি সাশ্রয় হিসাবে চিহ্নিত করার জন্য একটি চেকমার্ক রয়েছে (এটি পরিবর্তনের সাপেক্ষে)। - ::picker(select) : পপওভার যা একটি কাস্টমাইজযোগ্য সিলেক্টের অভ্যন্তরে button বাইরে সমস্ত সামগ্রী রয়েছে।

আপনি নির্বাচনের যে কোনও অংশ স্টাইল করতে পারেন। উদাহরণস্বরূপ, আপনি <option> উপাদানগুলির মধ্যে স্বেচ্ছাসেবী অ-ইন্টারেক্টিভ সামগ্রী যুক্ত করতে পারেন, ইন-পৃষ্ঠার বোতামটি স্টাইল করুন যা নির্বাচন করুন ড্রপ-ডাউনটি খোলে এবং বিকল্পগুলির ড্রপ-ডাউন তালিকাটি স্টাইল করুন ( ::picker(select) ) .

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

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

যদিও আপনার নির্বাচনের অভ্যন্তরে সীমাহীন সংখ্যক উপাদান থাকতে পারে, ব্রাউজারটি <button> উপাদানটির বাইরে যে কোনও কিছু বালতি করবে ::picker(select) সিউডো-উপাদান, যা বোতামে নোঙ্গর করা পপওভার হিসাবে আচরণ করে। এটি <button> ::picker(select) টগল করে। সিলেক্টের সরাসরি ভিতরে বিকল্পগুলি এবং অন্যান্য উপাদানগুলি ::picker(select) এ উত্তোলন করা হবে, বা আপনি স্টাইলিংয়ের উদ্দেশ্যে আপনার নিজের মোড়ক আনতে পারেন। এই মোড়কটিও ::picker(select) সিউডো-এলিমেন্টের ভিতরে স্থাপন করা হবে।

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

নতুন কাস্টমাইজযোগ্য <select> পপওভার এবং অ্যাঙ্কর অবস্থান থেকে কার্যকারিতা ব্যবহার করে। এটি এই দুটি অন্তর্নিহিত প্রযুক্তি দিয়ে নির্মিত। এর অর্থ হ'ল একটি নির্বাচিতের মধ্যে ড্রপ-ডাউন বিকল্প তালিকাটি একটি পপওভার হিসাবে কাজ করে যা ট্রিগার বোতামে নোঙ্গর করা হয় যা নির্বাচনটি খোলে।

আপনি এটি স্টাইল করতে অ্যাঙ্কর পজিশনিং ব্যবহার করতে পারেন ::picker(select) পপওভার (এটি অন্যান্য উপাদানগুলিতে নোঙ্গর করা সহ)। এই বিষয়বস্তু মডেলটির অর্থ হ'ল শীর্ষ স্তর অ্যানিমেশন শৈলীগুলি এন্ট্রি এবং প্রস্থান প্রভাবগুলি সঞ্চার করতে বিকল্প তালিকার সাথে কাজ করে।

বিদ্যমান <select> উপাদান উন্নত করুন

পূর্বে, ক্রোম টিম একটি <selectlist> উপাদানটির ধারণা নিয়ে কাজ করছিল। এই পোস্টে যা বর্ণিত হয়েছে তা হ'ল বৈশিষ্ট্যটি পরিবর্তে বিদ্যমান <select> উপাদানটি পুনরায় ব্যবহার করার জন্য নতুন ডিজাইন করা হয়েছে।

বিদ্যমান <select> উপাদানটিকে পুনরায় ব্যবহার করার অন্যতম মূল সুবিধা হ'ল ক্রমবর্ধমানভাবে বেসিক এইচটিএমএল উপাদানকে বাড়ানোর ক্ষমতা। একেবারে নতুন উপাদানের তুলনায়, <select> পুনরায় ব্যবহার করা আপনার পৃষ্ঠায় অর্থবহ সামগ্রী রেন্ডার করবে। নিম্নলিখিত উদাহরণটি কাস্টমাইজড সিলেক্ট বনাম দেখায় যে কোনও সমর্থিত ব্রাউজারের ব্যবহারকারী কী দেখতে পাবেন:

মৌলিক স্টাইলিং

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

তীর সূচকটি কাস্টমাইজ করতে, আপনার নিজের বোতামটি যুক্ত করুন এবং নির্বাচনের ভিতরে তীরটি যুক্ত করুন।

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

তারপরে, তীরটি স্টাইল করুন:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

বিকল্পগুলির মধ্যে জটিল সামগ্রী

<select> এর মধ্যে <option> উপাদানগুলির মধ্যে স্ট্রিংগুলির বাইরে সামগ্রী যুক্ত এবং স্টাইল করার ক্ষমতা নিয়ে জিনিসগুলি আরও নিন। একটি প্রাথমিক উদাহরণ হ'ল ড্রপ-ডাউন মেনুতে দেশের নামের পাশে পতাকা চিত্রগুলি যুক্ত করা। এটি অর্জন করতে, বিকল্প পাঠ্যের পাশে একটি চিত্র উপাদান যুক্ত করুন।

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

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

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

নির্বাচিত বিকল্পটি স্টাইল করুন

আপনি নির্বাচিত বিকল্পটি ড্রপ-ডাউনের চেয়ে নির্বাচিত অবস্থায় আলাদাভাবে প্রদর্শিত হতে চান। এর উদাহরণ হ'ল জিমেইল ইউআই, যেখানে স্থান সংরক্ষণের জন্য, বিকল্পটি নির্বাচন করার পরে লেবেলটি সরানো হয়। স্টাইলিংয়ের জন্য <selectedoption> উপাদানটিতে হুক করে এটি করুন। <option> এ নিম্নলিখিত সমস্ত মার্কআপ রয়েছে:

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

এখন প্রয়োগ করুন display: none পাঠ্য সামগ্রীটি আড়াল .text <selectedoption> কেবল আইকনটি দেখান:

selectedoption .text {
  display: none;
}

ইন্টারেক্টিভ বিকল্প

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

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

সীমাবদ্ধতা এবং অ্যাক্সেসযোগ্যতা নোট

মহান ক্ষমতা মহান দায়িত্ব আসে. জিনিসগুলিকে অ্যাক্সেসযোগ্য রাখতে বৈশিষ্ট্যটির কিছু সীমাবদ্ধতা রয়েছে।

• <option> উপাদানগুলি ব্যতীত, কোনও ইন্টারেক্টিভ (ফোকাসযোগ্য) উপাদানগুলি এখনও <select> যেমন বোতাম বা অন্যান্য উপাদানগুলির অভ্যন্তরে অনুমোদিত নয়। আপাতত, প্রস্তাবিত সামগ্রী মডেলটি কেবল <div> , <span> , <option> , <optgroup> , <img> , <svg> , এবং <hr> উপাদানগুলির জন্য অনুমতি দেয়।
• আমরা একটি অ্যাক্সেসযোগ্য সমাধান কাজ করার সাথে সাথে বিভক্ত বোতামগুলি বর্তমানে পরীক্ষার পর্যায়ে রয়েছে।

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

উপসংহার

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

এবং এই বৈশিষ্ট্যটি এখনও বিকাশে রয়েছে, আমরা এই সংক্ষিপ্ত প্রতিক্রিয়া ফর্মের মাধ্যমে আপনার প্রতিক্রিয়া শুনতে চাই।

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