डेवलपर से सुझाव, राय या शिकायत पाने का अनुरोध: पसंद के मुताबिक विकल्प चुनना

Una Kravets

<select> एलिमेंट जैसे फ़ॉर्म कंट्रोल को स्टाइल करने में, डेवलपर को कई सालों से समस्या आ रही है. हम इस समस्या को हल करने पर काम कर रहे हैं. यह काम मुश्किल है और इसे सही तरीके से करने में काफ़ी समय लग गया है. हालांकि, हम इस सुविधा को लॉन्च करने के बहुत करीब हैं. चुनिंदा एलिमेंट का ऐसा वर्शन जो अपनी पसंद के मुताबिक बनाया जा सकता है, वह WHATWG में आधिकारिक तौर पर दूसरे चरण में है. इस वर्शन में, अलग-अलग ब्राउज़र के लिए ज़रूरी बदलाव किए गए हैं. साथ ही, Chrome Canary 130 में इसका प्रोटोटाइप उपलब्ध है, जिसे टेस्ट किया जा सकता है.

इसे आज़माएं और हमें अपने सुझाव/राय दें

देखें कि आपने Chrome Canary का जो वर्शन इंस्टॉल किया है वह 130 पर अपडेट हो. साथ ही, यह भी देखें कि आपने वेब प्लैटफ़ॉर्म की प्रयोग के तौर पर उपलब्ध सुविधाओं का फ़्लैग चालू किया हो. इस फ़्लैग को चालू करने के लिए, अपने पता बार में chrome://flags पर जाएं और #experimental-web-platform-features को चालू करें. इसके बाद, आपको इस पोस्ट में Codepen के डेमो दिखने चाहिए. इसके अलावा, सभी टूल को एक ही जगह पर देखने के लिए, Codepen का यह कलेक्शन देखें.

इस सुविधा के बारे में सुझाव, राय या शिकायत देने के लिए, इस फ़ॉर्म का इस्तेमाल करें. इसे पूरा करने में सिर्फ़ तीन मिनट लगेंगे!

आइए, पसंद के मुताबिक बनाए जा सकने वाले select API की सुविधाओं के बारे में जानें. यह एपीआई, मौजूदा एचटीएमएल select टैग पर आधारित है.

नए <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> पर लागू किया जाता है.

अब आपके पास चुने गए एलिमेंट को पसंद के मुताबिक बनाने का विकल्प है. पसंद के मुताबिक बनाया जा सकने वाला नया चुनने का विकल्प, कुछ डिफ़ॉल्ट स्टाइल के साथ आता है. ये स्टाइल सभी ब्राउज़र और ऑपरेटिंग सिस्टम पर एक जैसे दिखते हैं. macOS पर Chrome में मौजूद चुनने के मौजूदा तरीके के मुकाबले, पसंद के मुताबिक बनाया गया डिफ़ॉल्ट चुनने का तरीका ऐसा दिखता है:

अलग-अलग हिस्सों को अलग-अलग करना

पसंद के मुताबिक बनाए जा सकने वाले नए चुनने के मोड में जाने के बाद, आपके पास इन नए एलिमेंट का ऐक्सेस होता है: - selectedoption: यह उस विकल्प के अंदरूनी एचटीएमएल को दिखाता है जो फ़िलहाल चुना गया है. - option::before: इसमें एक सही का निशान होता है, जो डिफ़ॉल्ट सुलभता सुविधा के तौर पर चुने गए विकल्प को दिखाता है. हालांकि, इसमें बदलाव किया जा सकता है. - ::picker(select): पसंद के मुताबिक बनाए जा सकने वाले चुनिंदा आइटम में, button के बाहर मौजूद सारा कॉन्टेंट शामिल होता है.

चुनी गई टेक्स्ट के किसी भी हिस्से को स्टाइल किया जा सकता है. उदाहरण के लिए, <option> एलिमेंट में अपनी पसंद का ऐसा कॉन्टेंट जोड़ा जा सकता है जो इंटरैक्टिव न हो. साथ ही, चुनिंदा ड्रॉप-डाउन खोलने वाले इन-पेज बटन को स्टाइल किया जा सकता है. इसके अलावा, विकल्पों की ड्रॉप-डाउन सूची (::picker(select)) को भी स्टाइल किया जा सकता है.

आपके पास button और अपने बनाए गए ऐरो इंडिकेटर को स्टाइल करने का विकल्प भी है. साथ ही, किसी भी एलिमेंट के अंदर और उसके आस-पास अपनी पसंद का कॉन्टेंट जोड़ा जा सकता है. कॉन्टेंट जोड़ने के अलावा, इनमें से किसी भी नए एलिमेंट और डिफ़ॉल्ट स्टाइल को छिपाया जा सकता है. उदाहरण के लिए, अगर आपको विकल्प के ::before सूडो एलिमेंट में इंडिकेटर चेकमार्क नहीं चाहिए, तो नीचे दी गई सीएसएस का इस्तेमाल करें.

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

आपके चुनिंदा एलिमेंट में अनलिमिटेड एलिमेंट हो सकते हैं. हालांकि, ब्राउज़र <button> एलिमेंट के बाहर मौजूद किसी भी चीज़ को ::picker(select) स्यूडो-एलिमेंट में डाल देगा. यह बटन से जुड़े पॉपओवर की तरह काम करता है. यह <button>, ::picker(select) को टॉगल करता है. सीधे तौर पर 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> एलिमेंट का फिर से इस्तेमाल करने का एक मुख्य फ़ायदा यह है कि इससे बुनियादी एचटीएमएल एलिमेंट को लगातार बेहतर बनाया जा सकता है. किसी नए एलिमेंट की तुलना में, <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>

चुने गए विकल्प को स्टाइल करना

हो सकता है कि आप चुने गए विकल्प को, चुने गए राज्य में ड्रॉप-डाउन में दिखने वाले विकल्प से अलग दिखाना चाहें. इसका एक उदाहरण Gmail का यूज़र इंटरफ़ेस (यूआई) है. यहां विकल्प चुनने के बाद, जगह बचाने के लिए लेबल हटा दिया जाता है. ऐसा करने के लिए, स्टाइल के लिए <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;
}

इंटरैक्टिव विकल्प

::picker(select) की स्टाइल को पूरी तरह से कंट्रोल करके, पिछले डेमो को बेहतर बनाएं, ताकि उसे कर्सर घुमाने और फ़ोकस करने पर इंटरैक्टिव बनाया जा सके. इस डेमो में, नए calc-size() फ़ंक्शन का इस्तेमाल, पिकर की चौड़ाई को ऐनिमेट करने के लिए किया गया है. यह पिकर की चौड़ाई को आइकॉन दिखाने से लेकर, कर्सर घुमाने पर विकल्पों की पूरी चौड़ाई दिखाने तक करता है. इसके अलावा, अगर चुनने के लिए दिए गए विकल्प में focus-visible का विकल्प है, तो भी यह फ़ंक्शन काम करता है.

/* 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);
}

सीमाएं और सुलभता से जुड़ी जानकारी

ज़्यादा ताक़त के साथ, ज़्यादा ज़िम्मेदारी आती है. इस सुविधा में कुछ सीमाएं हैं, ताकि सभी लोग इसका इस्तेमाल कर सकें.

• फ़िलहाल, <select> में <option> एलिमेंट के अलावा, किसी भी इंटरैक्टिव (फ़ोकस किए जा सकने वाले) एलिमेंट का इस्तेमाल नहीं किया जा सकता. जैसे, बटन या दूसरे एलिमेंट. फ़िलहाल, कॉन्टेंट के लिए सुझाए गए मॉडल में सिर्फ़ <div>, <span>, <option>, <optgroup>, <img>, <svg>, और <hr> एलिमेंट का इस्तेमाल किया जा सकता है.
• फ़िलहाल, स्प्लिट बटन पर एक्सपेरिमेंट चल रहा है. हम इस सुविधा को सभी के लिए उपलब्ध कराने की कोशिश कर रहे हैं.

आने वाले समय में, कॉन्टेंट मॉडल को ज़्यादा सुविधाजनक बनाने के लिए, इसमें और भी बदलाव किए जा सकते हैं. ऐसा इसलिए, क्योंकि इन सुविधाओं को ऐक्सेस करने के तरीकों को बेहतर बनाया जा रहा है.

नतीजा

हमें यह देखकर खुशी हो रही है कि इस सुविधा को वर्किंग ग्रुप और स्टैंडर्ड बॉडी की मदद से आगे बढ़ाया जा रहा है. साथ ही, हम इस सुविधा के प्रोटोटाइप को बनाने और इसकी परफ़ॉर्मेंस का आकलन करने के दौरान, अपनी प्रोग्रेस शेयर करते रहेंगे. अगर आपको कुछ ऐसा मिलता है जो उम्मीद के मुताबिक काम नहीं करता, तो हमें बताएं!

फ़िलहाल, यह सुविधा डेवलप की जा रही है. इसलिए, हमें इस छोटे फ़ीडबैक फ़ॉर्म की मदद से, अपने सुझाव, शिकायत या राय देने में खुशी होगी.

इस सुविधा को सही तरीके से बनाने और वेब पर ऐक्सेस किए जा सकने वाले और पसंद के मुताबिक बनाए जा सकने वाले फ़ॉर्म कंट्रोल बनाने में हमारी मदद करने के लिए धन्यवाद!