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

Una Kravets

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

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

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

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

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

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

Popover API: अब Baseline में उपलब्ध है

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

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

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

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

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

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

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

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

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

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

Chrome 125 से, सीएसएस ऐंकर पोज़िशनिंग एपीआई का इस्तेमाल किया जा सकता है. यह नई सुविधा, एक एलिमेंट को दूसरे एलिमेंट से जोड़ती है. साथ ही, स्क्रीन के किनारे के पास पहुंचने पर, एलिमेंट की पोज़िशन अपने-आप बदल जाती है. यह सुविधा, 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> एलिमेंट शामिल हैं.

पसंद के मुताबिक बनाने की सुविधा को अनलॉक करने के लिए, appearance: base-select; को <select> एलिमेंट और उसके नए ::picker(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>

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

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

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

स्टाइलिंग इंटरेस्ट इनवोकर

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

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

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

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

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

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

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

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

अन्य संसाधन:

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