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

Una Kravets

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

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

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

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

ध्यान दें: हम समझते हैं कि Chrome कैनरी में सुलभता सुविधाओं को लागू करने की प्रोसेस अभी पूरी नहीं हुई है. हालांकि, इसे आज़माने के लिए पहले ही एक शुरुआती सुविधा उपलब्ध है. एक टीम जिसमें लेखक, ब्राउज़र लागू करने वाले, और सहायक टेक्नोलॉजी विशेषज्ञ शामिल हैं, यह पक्का करने के लिए कड़ी मेहनत कर रही है कि लेखक के मान्य पैटर्न को आसानी से ऐक्सेस किया जा सके. हमें शुरुआती लागू करने के बारे में आपका सुझाव, शिकायत या राय मिलना पसंद होगा.

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

नए <select> में ऑप्ट-इन करना

नए व्यवहार के लिए ऑप्ट-इन करने के लिए, पेज में मौजूद चुनें बटन और चुनें पिकर, दोनों पर सीएसएस appearance प्रॉपर्टी का इस्तेमाल करें. ऑप्ट-इन करने के लिए, अपने <select> एलिमेंट और ::picker(select) पर appearance: base-select सेट करें.

::picker(select), उपयोगकर्ता-एजेंट से मिला एक नया सूडो-एलिमेंट है. यह सिर्फ़ उन <select> एलिमेंट पर लागू होता है जिन्हें appearance: base-select का इस्तेमाल करके, नए व्यवहार के लिए ऑप्ट इन किया गया है. यह पिकर pseudo-element वह पॉपओवर है, जो बेस चुनें बटन से ट्रिगर होता है. यहां दिए गए कोड में बताए गए तरीके से, दोनों तरह के खातों के लिए ऑप्ट-इन किया जा सकता है:

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

सिर्फ़ इन-पेज बटन को ऑप्ट-इन करने का विकल्प चुना जा सकता है. हालांकि, इन-पेज बटन को चुने बिना, सिर्फ़ पिकर पॉपओवर को ऑप्ट-इन नहीं किया जा सकता. ::picker(select) सिर्फ़ तब बनाया जाता है, जब appearance: base-select को <select> पर लागू किया जाता है.

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

पसंद के मुताबिक़ बनाने के लिए, दाईं ओर मौजूद यूज़र एजेंट का डिफ़ॉल्ट स्टाइल चुनें. इसमें बदलाव हो सकता है. हमें इस बारे में आपका सुझाव/राय मिलना पसंद होगा.

सामान्य सेलेक्ट और पसंद के मुताबिक सेलेक्ट के बीच अंतर दिखाने वाला डेमो.

ध्यान दें: चुनिंदा (<select multiple> और <select size=n>) पर multiple और size एट्रिब्यूट, appearance: base-select में अभी तक काम नहीं करते.

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

डायग्राम, जिसमें चुने गए डेटा के हिस्से दिखाए गए हैं.

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

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

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

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

option में मौजूद पूरा टेक्स्ट कॉन्टेंट, चुने गए एलिमेंट के फ़ॉलबैक वर्शन में रेंडर किया जाता है.

बेसिक स्टाइलिंग

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

Gmail की शैली चुनने का आइकॉन, जिसमें चुना गया विकल्प दिखाने वाला आइकॉन मौजूद है.

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

::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);
}

Gmail की इंटरैक्टिव स्टाइल चुनने की सुविधा, जिसमें कर्सर घुमाने पर या फ़ोकस करने पर, कॉन्टेंट के क्रम में दिखता है.

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

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

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

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

नतीजा

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

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

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