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

Una Kravets

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

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

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

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

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

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

নতুন আচরণে অপ্ট-ইন করতে ইন-পেজ সিলেক্ট বোতাম এবং সিলেক্ট পিকার উভয়েই সিএসএস appearance বৈশিষ্ট্য ব্যবহার করুন। অপ্ট-ইন করতে, appearance: base-select আপনার <select> উপাদানে এবং ::picker(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> উপাদানগুলির জন্য অনুমতি দেয়৷
• স্প্লিট বোতামগুলি বর্তমানে পরীক্ষামূলক পর্যায়ে রয়েছে কারণ আমরা একটি অ্যাক্সেসযোগ্য সমাধান নিয়ে কাজ করি৷

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

উপসংহার

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

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

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