ডেভেলপারের মতামতের জন্য অনুরোধ: কাস্টমাইজ করা যায় এমন বাছাই

Una Kravets

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

এটি ব্যবহার করে দেখুন এবং আপনার মতামত জানান

আপনার ইনস্টল করা Chrome Canary ভার্সন ১৩০-এ আপডেট করা আছে কিনা এবং এক্সপেরিমেন্টাল ওয়েব প্ল্যাটফর্ম ফিচার ফ্ল্যাগ চালু আছে কিনা তা চেক করুন। আপনার অ্যাড্রেস বারে chrome://flags-এ গিয়ে এবং #experimental-web-platform-features চালু করে আপনি এই ফ্ল্যাগ চালু করতে পারবেন। তারপর, আপনি এই পোস্টে Codepen ডেমো দেখতে পাবেন। বিকল্প হিসেবে, আপনি এই Codepen সংগ্রহ চেক করে দেখতে পারেন যাতে সবকটি এক জায়গায় দেখতে পান।

ফিচার সম্পর্কে মতামত জানাতে এই ফর্ম ব্যবহার করুন। এটি সম্পূর্ণ করতে মাত্র তিন মিনিট সময় লাগবে!

আসুন, কাস্টমাইজ করা যায় এমন সিলেক্ট API-এর ফিচারগুলি সম্পর্কে জেনে নেওয়া যাক, যা আগে থেকে থাকা HTML সিলেক্ট ট্যাগের উপর ভিত্তি করে তৈরি করা হয়েছে।

নতুন <select> চালু করা হচ্ছে

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

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

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

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

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

ডানদিকে কাস্টমাইজ করা যায় এমন পছন্দের জন্য ডিফল্ট ইউজার এজেন্ট স্টাইল। এটি পরিবর্তন হতে পারে এবং এই বিষয়ে আপনার মতামত জানতে পারলে আমরা খুশি হব।
বেসিক বেছে নেওয়া বনাম কাস্টমাইজ করা যায় এমন বেছে নেওয়ার ডেমো।

অংশগুলি আলাদা করা হচ্ছে

ডায়াগ্রামে সিলেক্টের অংশ দেখানো হচ্ছে।

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

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

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

/* 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> এলিমেন্ট উন্নত করুন

আগে, Chrome টিম <selectlist> এলিমেন্টের আইডিয়া নিয়ে কাজ করছিল। এই পোস্টে যা বর্ণনা করা হয়েছে তা হল সেই ফিচারটি যা পরিবর্তে আগে থেকে থাকা <select> এলিমেন্টটি আবার ব্যবহার করার জন্য নতুন করে ডিজাইন করা হয়েছে।

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

option-এর মধ্যে থাকা সব টেক্সট কন্টেন্ট বেছে নেওয়া এলিমেন্টের ফলব্যাক ভার্সনে রেন্ডার করা হয়।

বেসিক স্টাইলিং

বেছে নেওয়া এলিমেন্টের ভিজ্যুয়াল স্টাইলিংয়ের মতো সহজ পরিবর্তনও হতে পারে। যেমন, বোতামের স্টাইল, হোভার ও ফোকাস স্টাইল অথবা বেছে নেওয়া বিকল্পের ব্যাকগ্রাউন্ড আপডেট করতে। 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>

টেক্সট কন্টেন্ট লুকাতে এবং শুধুমাত্র আইকন দেখাতে, এখন <selectedoption>-এর মধ্যে .text-এ display: none প্রয়োগ করুন:

selectedoption .text {
  display: none;
}
Gmail-স্টাইল বেছে নিন, যেখানে বেছে নেওয়া বিকল্পের জন্য একটি আইকন দেখানো হয়।

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

::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);
}
হোভার বা ফোকাস করার সময় কন্টেন্ট ধীরে ধীরে দেখানোর মাধ্যমে ইন্টার‍্যাক্টিভ Gmail-স্টাইল বেছে নেওয়া।

সীমাবদ্ধতা ও অ্যাক্সেসিবিলিটি সংক্রান্ত নোট

ক্ষমতা বাড়লে দায়িত্বও বাড়ে। সবকিছু অ্যাক্সেসযোগ্য রাখতে, ফিচারের উপর কিছু সীমাবদ্ধতা আরোপ করা হয়েছে।

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

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

উপসংহার

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

এই ফিচারটি এখনও ডেভেলপ করা হচ্ছে, তাই এই সংক্ষিপ্ত মতামত জানানোর ফর্ম-এর মাধ্যমে আপনার মতামত জানালে আমরা খুশি হব।

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