वेब यूज़र इंटरफ़ेस (यूआई) में नया क्या है: I/O 2025 की खास जानकारी

Una Kravets

पब्लिश होने की तारीख: 14 अगस्त, 2025

Google I/O इवेंट सीज़न खत्म होने वाला है. इस पोस्ट में, इस साल हमारे इवेंट में शेयर की गई सीएसएस और वेब यूज़र इंटरफ़ेस (यूआई) की मुख्य हाइलाइट के बारे में बताया गया है.

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

Chrome टीम, ब्राउज़र बनाने वाली अन्य कंपनियों, CSSWG और WHATWG जैसी स्टैंडर्ड बॉडी, और Open UI जैसे कम्यूनिटी ग्रुप के साथ मिलकर काम कर रही है. इसका मकसद, इन बुनियादी यूज़र इंटरफ़ेस (यूआई) पैटर्न को लागू करना आसान बनाना है.

पसंद के मुताबिक बनाए जा सकने वाले मेन्यू चुनें

फ़ॉर्म के लिए <select> एलिमेंट ज़रूरी है. हालांकि, इसके इंटरनल स्ट्रक्चर को ब्राउज़र से सुरक्षित रखा जाता है. इस वजह से, सीएसएस स्टाइलिंग को एक जैसा और पूरी तरह से लागू करना लगभग नामुमकिन है. बेहतर <select> बनाने के लिए, इसके बिल्डिंग ब्लॉक को समझना ज़रूरी है. जैसे, Popover API और CSS ऐंकर पोज़िशनिंग API.

Popover API: अब बेसलाइन में उपलब्ध है

कस्टम ड्रॉप-डाउन के लिए, विकल्पों का एक फ़्लोटिंग बॉक्स ज़रूरी होता है. यह बॉक्स, अन्य सभी यूज़र इंटरफ़ेस (यूआई) एलिमेंट के ऊपर दिखता है. इसे आसानी से बंद किया जा सकता है और यह फ़ोकस को सही तरीके से मैनेज करता है. Popover API इन सभी चीज़ों को मैनेज करता है. इस साल से, यह 'नया वर्शन उपलब्ध है' स्टेटस पर पहुंच गया है. इसका मतलब है कि यह सभी मुख्य ब्राउज़र में स्टेबल है.

पॉपओवर बनाने के लिए, दो चीज़ों की ज़रूरत होती है: ट्रिगर एलिमेंट (जैसे कि <button>) और पॉपओवर एलिमेंट. उन्हें कनेक्ट करने के लिए, पॉपओवर को id और [popover] एट्रिब्यूट दें. इसके बाद, बटन के [popovertarget] एट्रिब्यूट में उस id को रेफ़रंस करें.

Popover API, एलिमेंट के पूरे लाइफ़साइकल को मैनेज करता है. इससे ये काम किए जा सकते हैं:

• टॉप-लेयर रेंडरिंग: अब z-इंडेक्स से जुड़ी समस्याओं का सामना नहीं करना पड़ेगा.
• लाइट डिसमिस की वैकल्पिक सुविधाएं: जब कोई उपयोगकर्ता पॉपओवर एरिया के बाहर क्लिक करता है, तब यह बंद हो जाता है.
• फ़ोकस को अपने-आप मैनेज करने की सुविधा: ब्राउज़र, पॉपओवर में टैब नेविगेशन को मैनेज करता है.
• ऐक्सेस किए जा सकने वाले बाइंडिंग: इसमें इंटरैक्शन मॉडल को नेटिव तरीके से हैंडल किया जाता है.

<dialog> एलिमेंट को अपग्रेड किया गया है

पॉपओवर एक बेहतरीन सुविधा है, लेकिन यह हमेशा सही विकल्प नहीं होता. उदाहरण के लिए, पेज ब्लॉक करने वाले ऐसे इंटरैक्शन जिनमें उपयोगकर्ता के सुझाव, शिकायत या राय की ज़रूरत होती है उनके लिए, मोडल <dialog> ज़्यादा सही होता है.

अब तक, <dialog> में [popover] की कुछ सुविधाएं उपलब्ध नहीं थीं. हालांकि, अब ऐसा नहीं होगा. नए closedby="any" एट्रिब्यूट की मदद से, अब मोडल डायलॉग में लाइट डिसमिस की सुविधा काम करती है. इसका मतलब है कि जब उपयोगकर्ता डायलॉग के बाहर क्लिक करता है या Escape कुंजी दबाता है, तो डायलॉग बंद हो जाता है.

इसके अलावा, कमांड इन्वोकर ([command] और [commandfor]) बटन को किसी कार्रवाई से जोड़ने का एक तरीका उपलब्ध कराते हैं. इसमें JavaScript का इस्तेमाल नहीं किया जाता. जैसे, command="show-modal" की मदद से डायलॉग बॉक्स खोलना.

सीएसएस ऐंकर पोज़िशनिंग

पॉपओवर दिखने के बाद, उसे उस एलिमेंट के हिसाब से पोज़िशन किया जाना चाहिए जिसने उसे खोला है. JavaScript की मदद से इसे मैन्युअल तरीके से कैलकुलेट करना मुश्किल होता है. साथ ही, इससे परफ़ॉर्मेंस पर बुरा असर पड़ सकता है.

Chrome 125 से, CSS ऐंकर पोज़िशनिंग एपीआई का इस्तेमाल किया जा सकता है. इस नई सुविधा की मदद से, एक एलिमेंट को दूसरे एलिमेंट से जोड़ा जा सकता है. साथ ही, जब एलिमेंट स्क्रीन के किनारे के पास पहुंच जाता है, तो यह सुविधा अपने-आप उसकी जगह बदल देती है. यह सुविधा, Interop 2025 का हिस्सा है. यह अलग-अलग ब्राउज़र पर काम करने वाली एक पहल है, ताकि सबसे ज़्यादा अनुरोध की जाने वाली सुविधाओं को उपलब्ध कराया जा सके. इसका मतलब है कि हम उम्मीद कर सकते हैं कि यह सुविधा, साल 2025 के आखिर तक सभी मुख्य ब्राउज़र में उपलब्ध हो जाएगी.

anchor-name और position-anchor प्रॉपर्टी के साथ एलिमेंट को साफ़ तौर पर लिंक किया जा सकता है. हालांकि, स्पेसिफ़िकेशन और Chrome 133 में हुए अपडेट की वजह से, <popover> और उसे चालू करने वाले <button> के बीच एंकर का संबंध अपने-आप बन जाता है. इससे कोड काफ़ी आसान हो जाता है. इसका मतलब है कि अब पॉपओवर को सीएसएस की एक लाइन से पोज़िशन किया जा सकता है. जैसे: position-area: bottom span-left.

chrome.dev का ऐंकर टूल आपको position-area का इस्तेमाल करने का तरीका बताता है, ताकि आपको अपनी पसंद की जगह मिल सके:

position-try-fallbacks का इस्तेमाल करके फ़ॉलबैक तय करें, ताकि ब्राउज़र आपके ऐंकर की जगह बदल सके और उन्हें स्क्रीन से बाहर जाने से रोका जा सके. यहां दिए गए डेमो में, एक ऐसा पॉपओवर दिखाया गया है जो इस प्रॉपर्टी का इस्तेमाल, फिर से पोज़िशन करने के लॉजिक के लिए करता है:

<select> को अपनी पसंद के मुताबिक बनाने की सुविधा

पिछले वर्शन में इन बिल्डिंग ब्लॉक के साथ, <select> एलिमेंट के लिए वेब-नेटिव स्टाइलिंग, Chrome 134 में उपलब्ध हो गई है. इसमें नई appearance प्रॉपर्टी, नए स्यूडो-एलिमेंट, और <selectedcontent> एलिमेंट शामिल हैं.

पसंद के मुताबिक बनाने की सुविधा को अनलॉक करने के लिए, <select> एलिमेंट और उसके नए ::picker(select) स्यूडो-एलिमेंट पर appearance: base-select; लागू करें. यह स्यूडो-एलिमेंट, विकल्पों की ड्रॉप-डाउन सूची को टारगेट करता है. इससे स्टाइलिंग के लिए नए इंटरनल पार्ट दिखते हैं. इनमें ये शामिल हैं:

• <selectedcontent>: यह बटन में दिखाए गए चुने गए विकल्प के कॉन्टेंट को दिखाता है.
• ::picker-icon: ड्रॉप-डाउन ऐरो आइकॉन
• <option>:checked और ::checkmark: चुने गए विकल्प और उसके चेकबॉक्स इंडिकेटर की स्टाइल तय करने के लिए

इससे विकल्पों में रिच कॉन्टेंट शामिल किया जा सकता है. साथ ही, डिसप्ले पर बेहतर कंट्रोल पाया जा सकता है. उदाहरण के लिए, विकल्पों की सूची में आइकॉन और सबटाइटल दिखाए जा सकते हैं. हालांकि, selectedcontent में मौजूद display: none का इस्तेमाल करके, उन्हें बंद स्थिति में छिपाया जा सकता है.

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

कैरसेल

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

स्क्रोलर का इस्तेमाल शुरू करना

कैरसेल बनाने के लिए, आइटम की ऐसी सूची से शुरुआत करें जिसमें आइटम, कंटेनर से बाहर जा रहे हों. कॉन्टेंट को स्क्रोल करने की सुविधा चालू रखते हुए, हॉरिज़ॉन्टल स्क्रोलबार को छिपाने के लिए scrollbar-width: none का इस्तेमाल करें. इसके अलावा, स्क्रोलर को "तेज़" बनाने के लिए, scroll-snap-type और scroll-snap-align लागू करें. इससे यह पक्का होता है कि उपयोगकर्ता के स्क्रोल करने पर आइटम अपनी जगह पर तुरंत दिखें.

::scroll-button के साथ पिछला और अगला

Chrome 135 में शामिल किया गया नया ::scroll-button() स्यूडो-एलिमेंट, ब्राउज़र को "अगला" और "पिछला" बटन जनरेट करने के लिए कहता है. ये बटन, स्टेटफ़ुल और ऐक्सेस किए जा सकते हैं. ब्राउज़र, सही एआरआईए भूमिकाओं और टैब के क्रम को अपने-आप मैनेज करता है. साथ ही, शुरुआत या आखिर में पहुंचने पर बटन भी बंद कर देता है. यह सब बिना किसी JavaScript को जोड़े होता है.

स्क्रोल बटन चालू करने के लिए, उन्हें कॉन्टेंट और सुलभता लेबल दें. जैसे:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

सीएसएस ऐंकर पोज़िशनिंग का इस्तेमाल करके, इन बटन को स्टाइल करें और उन्हें पैरंट कैरसेल के हिसाब से पोज़िशन करें. ऐसा करने का यही तरीका सुझाया गया है.

::scroll-marker की मदद से सीधे नेविगेशन

डॉट इंडिकेटर या थंबनेल के लिए, ::scroll-marker और ::scroll-marker-group छद्म एलिमेंट, नेविगेशन मार्कर को सीधे तौर पर आपके स्क्रोल कंटेनर में मौजूद आइटम से जोड़ते हैं. ब्राउज़र, ग्रुप को tablist की तरह मानता है और कीबोर्ड नेविगेशन को मैनेज करता है.

स्क्रोल बटन की तरह ही, content प्रॉपर्टी का इस्तेमाल करके स्क्रोल मार्कर शुरू करें. साथ ही, सुलभता वाला लेबल दें. यहां दिए गए उदाहरण में, स्क्रोल मार्कर के लिए लेबल सेट करने के लिए डेटा एट्रिब्यूट का इस्तेमाल किया गया है. इसके अलावा, scroll-marker-group प्रॉपर्टी का इस्तेमाल करके, स्क्रोल मार्कर को ::scroll-marker-group में रखें. आखिर में, नई :target-current स्यूडो-क्लास का इस्तेमाल करके, चालू मार्कर को स्टाइल करें. यहां एक उदाहरण दिया गया है, जिससे पता चलता है कि सामान्य कैरसेल में यह कैसा दिख सकता है:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

स्क्रोल की स्थिति के बारे में क्वेरी

स्क्रोल करने से जुड़ी नई सीएसएस सुविधाओं की मदद से, ज़्यादा डाइनैमिक और इंटरैक्टिव कैरसेल बनाए जा सकते हैं. scroll-state query एक नई मीडिया क्वेरी है. यह स्क्रोलर की स्थिति के आधार पर लागू होती है. स्क्रोल-स्टेट क्वेरी तीन तरह की होती हैं. इन्हें @container स्टेटमेंट में scroll-state() का इस्तेमाल करके ऐक्सेस किया जा सकता है. कैंपेन के तीनों सब-टाइप के नाम ये रहे:

• scroll-state(snapped): जब कोई एलिमेंट "स्नैप की गई" पोज़िशन में होता है, तब यह मैच करता है. कैरसेल में, यह तब होता है, जब आइटम कैरसेल के बीच में स्नैप किया गया हो.
• scroll-state(stuck): जब कोई पैरंट एलिमेंट स्टिकी हो जाता है, तब हेडर जैसे किसी एलिमेंट को स्टाइल करें.
• scroll-state(scrollable): विज़ुअल इंडिकेटर जोड़ें, जैसे कि फ़ेड. इससे पता चलेगा कि स्क्रोल करने के लिए और कॉन्टेंट मौजूद है.

पूरी जानकारी को एक जगह इकट्ठा किया जा रहा है

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

इस इंटरैक्टिव कैरसेल में scroll-state() क्वेरी, ::scroll-button, ::scroll-marker, सीएसएस ऐंकर पोज़िशनिंग, और :target-current को एक साथ इस्तेमाल किया गया है.

इसके अलावा, interactivity नाम की नई प्रॉपर्टी का इस्तेमाल किया जा सकता है. इससे उपयोगकर्ताओं को सक्रिय कॉन्टेंट पर फ़ोकस करने में मदद मिलती है. interactivity: inert की मदद से, उपयोगकर्ता सीएसएस का इस्तेमाल करके इनर्टनेस लागू कर सकता है. इससे, ऑफ़-स्क्रीन कैरसेल आइटम पर फ़ोकस नहीं किया जा सकेगा और उन्हें ऐक्सेसिबिलिटी ट्री से हटा दिया जाएगा.

सीएसएस कैरसेल के बारे में ज़्यादा जानें.

इंटरैक्टिव होवरकार्ड

होवरकार्ड—ये ऐसे रिच पॉप-अप होते हैं जो किसी उपयोगकर्ता नाम या लिंक पर माउस घुमाने पर दिखते हैं. ये बहुत काम के होते हैं, लेकिन इन्हें सही तरीके से बनाना बहुत मुश्किल होता है. डेटा मिलने में होने वाली देरी, इवेंट हैंडलिंग, और एक से ज़्यादा डिवाइसों पर काम करने की सुविधा को सही तरीके से लागू करने में, एक टीम को कई महीने लग सकते हैं. हालांकि, हम एक नए डिक्लेरेटिव समाधान पर काम कर रहे हैं. इससे इस समस्या को हमेशा के लिए हल किया जा सकेगा.

[interestfor] की मदद से, दिलचस्पी के आधार पर ट्रिगर होने वाले पॉपओवर

डिक्लेरेटिव होवरकार्ड के पीछे की मुख्य वजह, [interestfor] एट्रिब्यूट है. आने वाली इस सुविधा में, पॉपओवर की सुविधा मिलती है. हालांकि, यह सुविधा उपयोगकर्ता की "दिलचस्पी" के आधार पर ट्रिगर होती है. उदाहरण के लिए, पॉइंटर डिवाइस पर उपयोगकर्ता की दिलचस्पी, पॉइंटर को घुमाना, कीबोर्ड से टैब नेविगेशन करना या टच स्क्रीन पर दबाकर रखना या टैप करना हो सकती है. मोबाइल इंटरैक्शन से जुड़ी समस्या अब तक हल नहीं हुई है.

क्लिक पर आधारित पॉपओवर को दिलचस्पी पर आधारित पॉपओवर में बदलने के लिए, एक इनवोकिंग एलिमेंट बनाएं. यह <button> या <a> हो सकता है. इसे [interestfor] एट्रिब्यूट दें, जो [popover] एलिमेंट के id के बराबर हो. एचटीएमएल में यह ऐसा दिखता है:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

ब्राउज़र, इवेंट के सभी जटिल लॉजिक को मैनेज करता है. जैसे:

• एंटर और एग्ज़िट इवेंट: फ़ाइन पॉइंटर डिवाइसों पर, कर्सर को एलिमेंट पर ले जाना, कीबोर्ड से टैब नेविगेशन, और कोर्स पॉइंटर डिवाइसों पर, एलिमेंट को दबाकर रखना या उसे छूना.
• इवेंट में देरी: सीएसएस की एक प्रॉपर्टी की मदद से, एंट्री और एग्ज़िट में होने वाली देरी को कंट्रोल करें.

यह सुविधा, अन्य पॉपओवर सुविधाओं के साथ काम करती है. जैसे, टॉप-लेयर सपोर्ट. इसमें पॉपओवर, DOM ट्री के बाकी हिस्से के ऊपर एक नई लेयर पर रेंडर होता है. साथ ही, सिमैंटिक कॉम्पोनेंट बाइंडिंग और सुलभता ट्री के मॉडल को नेटिव तौर पर हैंडल किया जाता है.

स्टाइलिंग में दिलचस्पी दिखाने वाले लोगों को टारगेट करने की सुविधा

दिलचस्पी जगाने वाले विज्ञापनों में कुछ नई सुविधाएं शामिल हैं. इनमें से एक यह है कि सीएसएस प्रॉपर्टी: interest-target-delay का इस्तेमाल करके, एंट्री और एग्ज़िट में होने वाली देरी को कंट्रोल किया जा सकता है. दूसरा फ़ायदा यह है कि :has-interest स्यूडो-क्लास का इस्तेमाल करके, यह तय किया जा सकता है कि इनवॉकिंग एलिमेंट को स्टाइल किया जाए या नहीं.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" और कई फ़ंक्शन वाला यूज़र इंटरफ़ेस

दिलचस्पी बढ़ाने वाले पॉप-अप के लिए, पज़ल का एक अहम हिस्सा नया पॉपओवर टाइप है: popover="hint". अन्य पॉपओवर से यह अलग इसलिए है, क्योंकि खुलने पर यह अन्य पॉपओवर को बंद नहीं करता. यह टूलटिप या झलक कार्ड के लिए सबसे सही है. इन्हें पहले से खुले हुए मेन्यू या चैट विंडो को बंद किए बिना दिखाया जाना चाहिए.

इससे, आपको कई फ़ंक्शन वाला शानदार यूज़र इंटरफ़ेस (यूआई) बनाने में मदद मिलती है. अब एक बटन में, popovertarget का इस्तेमाल करके ऑटो पॉपओवर की सुविधा जोड़ी जा सकती है. इससे बटन पर क्लिक करने पर, सूचनाओं वाला पैनल खोलने जैसी मुख्य कार्रवाई की जा सकती है. इसके अलावा, इसमें दिलचस्पी बढ़ाने वाला हिंट पॉपओवर भी जोड़ा जा सकता है. इससे पॉइंटर घुमाने पर काम की टूलटिप दिखती है.

आने वाला समय डिक्लेरेटिव प्रोग्रामिंग का है

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

अन्य संसाधन:

• Popover API
• ऐंकर पोज़िशनिंग
• ऐंकर टूल
• कमांड शुरू करने वाले
• पसंद के मुताबिक बनाए जा सकने वाले 'चुने' मेन्यू (आरएफ़सी)
• सीएसएस कैरसेल
• सीएसएस कैरसेल गैलरी
• सीएसएस कैरसेल कॉन्फ़िगरेशन टूल
• सीएसएस की स्क्रोल-स्टेट क्वेरी
• दिलचस्पी के हिसाब से विज्ञापन दिखाने की सुविधा के बारे में जानकारी