सीएसएस और वेब यूज़र इंटरफ़ेस (यूआई) की नई जानकारी: I/O 2024 का रीकैप

Una Kravets

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

इंटरैक्टिव अनुभव के नए तरीके

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

स्क्रोल-ड्रिवन ऐनिमेशन

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

स्क्रोल-ड्रिवन ऐनिमेशन बनाना

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

ऊपर दिए गए कोड में, एक सामान्य ऐनिमेशन के बारे में बताया गया है. यह ऐनिमेशन, इमेज की ओपैसिटी और स्केल को बदलकर व्यूपोर्ट में दिखता है. ऐनिमेशन, स्क्रोल की पोज़िशन के हिसाब से चलता है. इस इफ़ेक्ट को बनाने के लिए, पहले सीएसएस ऐनिमेशन सेट अप करें. इसके बाद, animation-timeline सेट करें. इस मामले में, animation-timeline फ़ंक्शन अपनी डिफ़ॉल्ट वैल्यू के साथ, स्क्रोलपोर्ट (इस उदाहरण में, यह व्यूपोर्ट भी है) के हिसाब से इमेज को ट्रैक करता है.view()

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

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

स्क्रोल करने पर दिखने वाले ऐनिमेशन का मतलब, पूरे पेज पर स्क्रोल करके कहानी बताने वाले अनुभव हो सकते हैं. हालांकि, इनका मतलब ज़्यादा सामान्य ऐनिमेशन भी हो सकते हैं. जैसे, वेब ऐप्लिकेशन को स्क्रोल करते समय हेडर बार का छोटा होना और शैडो दिखना.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

इस डेमो में, कुछ अलग-अलग मुख्य-फ़्रेम ऐनिमेशन का इस्तेमाल किया गया है. जैसे, हेडर, टेक्स्ट, नेविगेशन बार, और बैकग्राउंड. इसके बाद, हर एक पर स्क्रोल-ड्रिवन ऐनिमेशन लागू किया गया है. इन सभी में ऐनिमेशन की स्टाइल अलग-अलग है. हालांकि, इन सभी में ऐनिमेशन-टाइमलाइन, सबसे नज़दीकी स्क्रोलर, और ऐनिमेशन की रेंज एक जैसी है. यानी, पेज के सबसे ऊपर से लेकर 150 पिक्सल तक.

स्क्रोल-ड्रिवन ऐनिमेशन से परफ़ॉर्मेंस को मिलने वाले फ़ायदे

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

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

"हमने सामान्य JS स्क्रोल इवेंट का इस्तेमाल करने के मुकाबले, अपने कोड की लाइनों को 80% तक कम कर दिया. साथ ही, हमने देखा कि स्क्रोल करते समय सीपीयू का औसत इस्तेमाल 50% से घटकर 2% हो गया. - एंडी विहालिम, सीनियर सॉफ़्टवेयर इंजीनियर, Tokopedia"

स्क्रोल इफ़ेक्ट की नई सुविधाएं

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

आने वाले समय में, ब्राउज़र में स्क्रोल करने से जुड़ी और भी सुविधाएं उपलब्ध होंगी. इस डेमो में, आने वाले समय में उपलब्ध होने वाली इन सुविधाओं को दिखाया गया है. इसमें सीएसएस scroll-start-target का इस्तेमाल करके, पिकर में शुरुआती तारीख और समय सेट किया गया है. साथ ही, JavaScript scrollsnapchange इवेंट का इस्तेमाल करके, हेडर की तारीख को अपडेट किया गया है. इससे, स्नैप किए गए इवेंट के साथ डेटा को सिंक करना आसान हो जाता है.

इसका इस्तेमाल करके, JavaScript scrollsnapchanging इवेंट की मदद से, पिकर को रीयल टाइम में अपडेट किया जा सकता है.

फ़िलहाल, ये सुविधाएं सिर्फ़ Canary में फ़्लैग के पीछे उपलब्ध हैं. हालांकि, इनसे ऐसी सुविधाएं मिलती हैं जिन्हें प्लैटफ़ॉर्म पर पहले बनाना मुमकिन नहीं था या बहुत मुश्किल था. साथ ही, इनसे स्क्रोल करने पर होने वाले इंटरैक्शन की संभावनाओं के बारे में पता चलता है.

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

ट्रांज़िशन देखना

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

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

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

सिंगल-पेज ऐप्लिकेशन में व्यू ट्रांज़िशन को तुरंत चालू करने का तरीका बहुत आसान है. इसके लिए, document.startViewTransition का इस्तेमाल करके इंटरैक्शन को रैप करें. साथ ही, यह पक्का करें कि ट्रांज़िशन करने वाले हर एलिमेंट में view-transition-name एट्रिब्यूट हो. इसे डीओएम नोड बनाते समय, इनलाइन या JavaScript का इस्तेमाल करके डाइनैमिक तौर पर सेट किया जा सकता है.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

ट्रांज़िशन क्लास देखना

व्यू ट्रांज़िशन के नाम का इस्तेमाल, व्यू ट्रांज़िशन में कस्टम ऐनिमेशन लागू करने के लिए किया जा सकता है. हालांकि, कई एलिमेंट ट्रांज़िशन होने पर यह मुश्किल हो सकता है. इस साल व्यू ट्रांज़िशन के लिए किए गए पहले नए अपडेट से, इस समस्या को हल किया गया है. साथ ही, व्यू ट्रांज़िशन क्लास बनाने की सुविधा जोड़ी गई है, जिसे कस्टम ऐनिमेशन पर लागू किया जा सकता है.

ट्रांज़िशन के टाइप देखना

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

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

document.startViewTransition फ़ंक्शन में टाइप सेट अप किए जा सकते हैं. यह फ़ंक्शन अब ऑब्जेक्ट स्वीकार करता है. update, डीओएम को अपडेट करने वाला कॉलबैक फ़ंक्शन है. वहीं, types टाइप वाला एक ऐरे है.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

कई पेज वाले व्यू ट्रांज़िशन

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

क्रॉस-डॉक्यूमेंट की इस नई सुविधा में, एक ही ऑरिजिन में मौजूद वेब अनुभव शामिल हैं. जैसे, web.dev से web.dev/blog पर नेविगेट करना. हालांकि, इसमें क्रॉस-ऑरिजिन नेविगेट करना शामिल नहीं है. जैसे, web.dev से blog.web.dev या google.com जैसे किसी दूसरे डोमेन पर नेविगेट करना.

एक ही दस्तावेज़ में व्यू ट्रांज़िशन के साथ मुख्य अंतर यह है कि आपको अपने ट्रांज़िशन को document.startViewTransition() से रैप करने की ज़रूरत नहीं है. इसके बजाय, सीएसएस @view-transition at-rule का इस्तेमाल करके, व्यू ट्रांज़िशन में शामिल दोनों पेजों के लिए ऑप्ट-इन करें.

@view-transition {
  navigation: auto;
}

ज़्यादा कस्टम इफ़ेक्ट के लिए, JavaScript को नए pageswap या pagereveal इवेंट लिसनर का इस्तेमाल करके हुक किया जा सकता है. इससे आपको व्यू ट्रांज़िशन ऑब्जेक्ट का ऐक्सेस मिलता है.

pageswap की मदद से, पुराने स्नैपशॉट लिए जाने से ठीक पहले, आउटगोइंग पेज में कुछ बदलाव किए जा सकते हैं. वहीं, pagereveal की मदद से, नए पेज को शुरू होने के बाद रेंडर होने से पहले ही अपनी पसंद के मुताबिक बनाया जा सकता है.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

आने वाले समय में, हम व्यू ट्रांज़िशन को बेहतर बनाने के लिए काम कर रहे हैं. इसमें ये शामिल हैं:

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

इंजन की मदद से काम करने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट: मुश्किल इंटरैक्शन को आसान बनाना

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

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

ड्रॉपडाउन में कई हिस्से होते हैं और इसमें कई स्थितियां शामिल होती हैं. इन सभी स्थितियों को ध्यान में रखना ज़रूरी है. जैसे:

• कीबोर्ड बाइंडिंग (इंटरैक्शन शुरू/बंद करने के लिए)
• क्लिक करके खारिज करना
• ऐक्टिव पॉपओवर को मैनेज करना (एक पॉपओवर खुलने पर, अन्य पॉपओवर बंद करना)
• टैब फ़ोकस मैनेजमेंट
• चुने गए विकल्प की वैल्यू को विज़ुअलाइज़ करना
• ऐरो इंटरैक्शन स्टाइल
• स्टेट मैनेजमेंट (खोलें/बंद करें)

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

Popover API

सबसे पहले, हमने popover नाम का एक ग्लोबल एट्रिब्यूट लॉन्च किया था. हमें यह बताते हुए खुशी हो रही है कि यह एट्रिब्यूट कुछ हफ़्ते पहले ही, नए तौर पर उपलब्ध होने की स्थिति में पहुंचा है.

पॉपओवर एलिमेंट, display: none की मदद से तब तक छिपाए जाते हैं, जब तक उन्हें बटन या JavaScript जैसे इनवॉकर की मदद से खोला नहीं जाता. सामान्य पॉपओवर बनाने के लिए, एलिमेंट पर popover एट्रिब्यूट सेट करें. इसके बाद, popovertarget का इस्तेमाल करके, इसके आईडी को किसी बटन से लिंक करें. अब बटन, इनवोकर है,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

popover एट्रिब्यूट के चालू होने पर, ब्राउज़र कई मुख्य व्यवहारों को बिना किसी अतिरिक्त स्क्रिप्टिंग के हैंडल करता है. इनमें ये शामिल हैं:

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

ऐसा हो सकता है कि आप इस पॉपओवर एपीआई का इस्तेमाल आज भी कर रहे हों, लेकिन आपको इसकी जानकारी न हो. GitHub ने अपने होम पेज पर मौजूद “नया” मेन्यू और पुल अनुरोध की समीक्षा की खास जानकारी में पॉपओवर को लागू किया है. उन्होंने इस सुविधा को बेहतर बनाने के लिए, पॉपओवर पॉलीफ़िल का इस्तेमाल किया. इसे Oddbird ने बनाया है. इसमें GitHub के Keith Cirkel ने भी अहम योगदान दिया है. इसका इस्तेमाल पुराने ब्राउज़र पर किया जा सकता है.

“पॉपओवर पर माइग्रेट करने से, हमने हज़ारों लाइनों के कोड को हटा दिया है. पॉपओवर की मदद से, हमें मैजिक z-इंडेक्स नंबर से जूझने की ज़रूरत नहीं पड़ती... बटन के व्यवहार के बारे में जानकारी देने वाले सही ऐक्सेसिबिलिटी ट्री के साथ, फ़ोकस के व्यवहार को शामिल करने से, हमारे डिज़ाइन सिस्टम के लिए पैटर्न को सही तरीके से लागू करना काफ़ी आसान हो जाता है.-कीथ सर्कल, सॉफ़्टवेयर इंजीनियर, GitHub”

ऑब्जेक्ट को सीन में शामिल करने और हटाने पर दिखने वाले इफ़ेक्ट को ऐनिमेट करना

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

कीफ़्रेम टाइमलाइन पर display और content-visibility को ऐनिमेट करने की सुविधा.

transition-behavior प्रॉपर्टी के साथ allow-discrete कीवर्ड का इस्तेमाल करके, display जैसी अलग-अलग प्रॉपर्टी के ट्रांज़िशन चालू करें.

@starting-style से एंट्री इफ़ेक्ट को ऐनिमेट करने और उन्हें टॉप-लेयर में ले जाने के लिए, @starting-style का नियम.display: none

ऐनिमेशन के दौरान टॉप-लेयर के व्यवहार को कंट्रोल करने के लिए, ओवरले प्रॉपर्टी.

ये प्रॉपर्टी, टॉप लेयर में ऐनिमेशन के साथ दिखने वाले किसी भी एलिमेंट के लिए काम करती हैं. चाहे वह पॉपओवर हो या डायलॉग. बैकड्रॉप वाले डायलॉग के लिए, यह इस तरह दिखता है:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

सबसे पहले, @starting-style सेट अप करें, ताकि ब्राउज़र को पता चल सके कि इस एलिमेंट को डीओएम में किस स्टाइल से ऐनिमेशन करना है. ऐसा डायलॉग और बैकड्रॉप, दोनों के लिए किया जाता है. इसके बाद, डायलॉग और बैकड्रॉप, दोनों के लिए ओपन स्टेट को स्टाइल करें. डायलॉग के लिए, यह open एट्रिब्यूट का इस्तेमाल करता है. वहीं, पॉपओवर के लिए, ::popover-open स्यूडो-एलिमेंट का इस्तेमाल करता है. आखिर में, opacity, display, और overlay को allow-discrete कीवर्ड का इस्तेमाल करके ऐनिमेट करें, ताकि ऐनिमेशन मोड चालू हो जाए. इस मोड में, अलग-अलग प्रॉपर्टी ट्रांज़िशन कर सकती हैं.

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

पॉपओवर तो बस शुरुआत थी. एक बहुत ही दिलचस्प अपडेट यह है कि ऐंकर पोज़िशनिंग की सुविधा, अब Chrome 125 से उपलब्ध है.

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

सीएसएस में, ऐंकर की पोज़िशन सेट करने के लिए, ऐंकरिंग एलिमेंट (इस मामले में बटन) पर anchor-name प्रॉपर्टी का इस्तेमाल करें. साथ ही, पोज़िशन किए गए एलिमेंट (इस मामले में टूलटिप) पर position-anchor प्रॉपर्टी का इस्तेमाल करें. इसके बाद, anchor() फ़ंक्शन का इस्तेमाल करके, ऐंकर के हिसाब से बिलकुल सटीक या निश्चित पोज़िशन लागू करें. नीचे दिए गए कोड से, टूलटिप को बटन के नीचे सेट किया जाता है.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

इसके अलावा, ऐंकर फ़ंक्शन में सीधे तौर पर ऐंकर-नेम का इस्तेमाल करें और position-anchor प्रॉपर्टी को छोड़ दें. यह कई एलिमेंट से जोड़ने के लिए काम आ सकता है.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

आखिर में, justify और align प्रॉपर्टी के लिए नए anchor-center कीवर्ड का इस्तेमाल करें, ताकि पोज़िशन किए गए एलिमेंट को उसके ऐंकर के बीच में रखा जा सके.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

इस उदाहरण में, ऐंकर फ़ंक्शन का इस्तेमाल करके ऐंकर की पोज़िशन सेट अप की गई है. इसके लिए, left, right, और bottom की फ़िज़िकल प्रॉपर्टी का इस्तेमाल किया गया है. किसी लिंक पर कर्सर घुमाने पर, टारगेट ऐंकर बदल जाता है. साथ ही, ब्राउज़र टारगेट को पोज़िशनिंग लागू करने के लिए शिफ़्ट करता है. इसके अलावा, रंग को एक साथ ऐनिमेट करके एक अच्छा इफ़ेक्ट बनाता है.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area पोज़िशनिंग

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

पहले ऐंकर डेमो का आसान वर्शन, inset-area के साथ ऐसा दिखता है:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

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

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

position-try-options के साथ डाइनैमिक ऐंकर की पोज़िशन

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

अब ब्राउज़र, इन दोनों स्थितियों के बीच स्विच करेगा. इसमें सबसे पहले सही स्थिति को आज़माया जाएगा. इसके बाद, सबसे नीचे की स्थिति पर ले जाया जाएगा. इसे एक अच्छे ट्रांज़िशन के साथ किया जा सकता है.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

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

position-try-options: flip-block, flip-inline;

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

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

ऐंकर पोज़िशनिंग का इस्तेमाल करने के बारे में ज़्यादा जानें.

लेयर्ड यूज़र इंटरफ़ेस (यूआई) का भविष्य

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

इसके अलावा, दो तीसरे पक्ष के डेवलपर, कीथ सर्कल और ल्यूक वॉरलॉ के काम की वजह से, Canary में टेस्ट करने के लिए एक और सामान्य इनवोकर (invoketarget) उपलब्ध है. invoketarget, डेवलपर के लिए डिक्लेरेटिव अनुभव को सपोर्ट करता है. popovertarget, सभी इंटरैक्टिव एलिमेंट के लिए पॉपओवर उपलब्ध कराता है. इनमें <dialog>, <details>, <video>, <input type="file"> वगैरह शामिल हैं.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

स्टाइल किया जा सकने वाला select

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

select {
  appearance: base-select;
}

appearance: base-select के अलावा, एचटीएमएल से जुड़े कुछ नए अपडेट भी हैं. इनमें, विकल्पों को पसंद के मुताबिक बनाने के लिए datalist में रैप करने की सुविधा शामिल है. साथ ही, विकल्पों में इमेज जैसा कोई भी ऐसा कॉन्टेंट जोड़ा जा सकता है जिससे इंटरैक्ट नहीं किया जा सकता. आपको एक नए एलिमेंट, <selectedoption> का ऐक्सेस भी मिलेगा. यह एलिमेंट, विकल्पों के कॉन्टेंट को खुद में दिखाएगा. इसके बाद, इसे अपनी ज़रूरतों के हिसाब से पसंद के मुताबिक बनाया जा सकता है. यह एलिमेंट बहुत काम का है.

डेमो विज़ुअल

लाइव डेमो

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

यहां दिए गए कोड से पता चलता है कि Gmail के यूज़र इंटरफ़ेस (यूआई) में <selectedoption> को कैसे पसंद के मुताबिक बनाया जा सकता है. इसमें, जगह बचाने के लिए विज़ुअल आइकॉन, चुनी गई जवाब की टाइप को दिखाता है. selectedoption में बुनियादी डिसप्ले स्टाइल का इस्तेमाल किया जा सकता है, ताकि विकल्प की स्टाइलिंग को झलक की स्टाइलिंग से अलग किया जा सके. इस मामले में, विकल्प में दिखने वाले टेक्स्ट को selectedoption में विज़ुअली छिपाया जा सकता है.

डेमो विज़ुअल

लाइव डेमो

selectedoption .text {
  display: none;
}

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

पसंद के मुताबिक चुने जा सकने वाले विकल्पों की मदद से, कई तरह के काम किए जा सकते हैं. मुझे Airbnb की तरह देश चुनने की सुविधा बहुत पसंद है, क्योंकि इसमें रिस्पॉन्सिव डिज़ाइन के लिए एक बेहतरीन स्टाइल है. आने वाले स्टाइल किए जा सकने वाले select एलिमेंट की मदद से, यह और इस तरह के कई काम किए जा सकते हैं. इसलिए, यह वेब प्लैटफ़ॉर्म के लिए बहुत ज़रूरी है.

खास अकॉर्डियन

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

इसे चालू करने का तरीका यह है कि कई जानकारी वाले एलिमेंट के लिए एक ही नाम की वैल्यू लागू की जाए. इससे जानकारी का एक कनेक्टेड ग्रुप बन जाता है, जो रेडियो बटन के ग्रुप की तरह होता है

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid और :user-invalid

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

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

user-* फ़ॉर्म की पुष्टि करने वाले छद्म एलिमेंट का इस्तेमाल करने के बारे में ज़्यादा जानें.

field-sizing: content

हाल ही में, एक और काम का कॉम्पोनेंट अपडेट किया गया है. इसका नाम field-sizing: content है. इसे इनपुट और टेक्स्ट एरिया जैसे फ़ॉर्म कंट्रोल पर लागू किया जा सकता है. इससे इनपुट का साइज़, उसके कॉन्टेंट के हिसाब से बढ़ता या घटता है. field-sizing: content, टेक्स्ट एरिया के लिए खास तौर पर काम का हो सकता है. ऐसा इसलिए, क्योंकि अब आपको तय किए गए साइज़ के हिसाब से काम नहीं करना पड़ता. इससे आपको छोटे इनपुट बॉक्स में अपने प्रॉम्प्ट के शुरुआती हिस्सों में लिखे गए टेक्स्ट को देखने के लिए, ऊपर की ओर स्क्रोल करने की ज़रूरत नहीं पड़ती.

textarea, select, input {
  field-sizing: content;
}

फ़ील्ड के साइज़ के बारे में ज़्यादा जानें.

<select> में <hr>

<hr> या हॉरिज़ॉन्टल रूल एलिमेंट को चुनने की सुविधा, कॉम्पोनेंट की एक और छोटी, लेकिन काम की सुविधा है. हालांकि, इसका इस्तेमाल सिमैंटिक के तौर पर ज़्यादा नहीं किया जाता है, लेकिन इससे आपको चुनी गई सूची में कॉन्टेंट को अलग-अलग करने में मदद मिलती है. खास तौर पर, ऐसे कॉन्टेंट को अलग करने में मदद मिलती है जिसे आपको optgroup के साथ ग्रुप नहीं करना है. जैसे, प्लेसहोल्डर वैल्यू.

स्क्रीनशॉट चुनें

लाइव डेमो चुनें

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

select में hr का इस्तेमाल करने के बारे में ज़्यादा जानें

लाइफ़ क्वालिटी को बेहतर बनाने वाले सुधार

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

लुकअहेड के साथ नेस्ट करना

नेटिव सीएसएस नेस्टिंग की सुविधा पिछले साल सभी ब्राउज़र में उपलब्ध हो गई थी. इसके बाद, इसमें लुकअहेड की सुविधा जोड़ी गई. इसका मतलब है कि अब एलिमेंट के नाम से पहले & लगाना ज़रूरी नहीं है. इससे नेस्टिंग ज़्यादा एर्गोनॉमिक और मेरे पिछले अनुभव के हिसाब से लगती है.

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

ब्लॉक लेआउट के लिए, align-content प्रॉपर्टी

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

स्क्रीनशॉट

लाइव डेमो

div {
  align-content: center;
}

Text-wrap: balance and pretty

लेआउट की बात करें, तो text-wrap: balance और pretty को जोड़ने से टेक्स्ट लेआउट में काफ़ी सुधार हुआ है. text-wrap: balance का इस्तेमाल, टेक्स्ट के ज़्यादा एक जैसे ब्लॉक के लिए किया जाता है. वहीं, text-wrap: pretty का इस्तेमाल, टेक्स्ट की आखिरी लाइन में सिंगलटन को कम करने के लिए किया जाता है.

h1 {
  text-wrap: balance;
}

text-wrap: balance के बारे में ज़्यादा जानें.

इंटरनेशनल टाइपोग्राफ़ी से जुड़े अपडेट

सीजेके टेक्स्ट की सुविधाओं के लिए टाइपोग्राफ़िक लेआउट अपडेट को पिछले साल कई बेहतरीन अपडेट मिले. जैसे, word-break: auto-phrase सुविधा, जो लाइन को नैचुरल फ़्रेज़ बाउंड्री पर रैप करती है.

इसके अलावा, text-spacing-trim का इस्तेमाल करके, विराम चिह्न वाले वर्णों के बीच के स्पेस को कम किया जाता है. इससे चाइनीज़, जैपनीज़, और कोरियन टाइपोग्राफ़ी को ज़्यादा आसानी से पढ़ा जा सकता है और देखने में भी बेहतर लगती है.

रिलेटिव कलर सिंटैक्स

कलर थीमिंग की दुनिया में, हमने रिलेटिव कलर सिंटैक्स के साथ एक बड़ा अपडेट देखा.

इस उदाहरण में, यहां दिए गए रंगों में Oklch पर आधारित थीम का इस्तेमाल किया गया है. स्लाइडर के हिसाब से रंग की वैल्यू में बदलाव होने पर, पूरी थीम बदल जाती है. इसे रिलेटिव कलर सिंटैक्स की मदद से हासिल किया जा सकता है. बैकग्राउंड में रंग के आधार पर प्राइमरी कलर का इस्तेमाल किया जाता है. साथ ही, इसकी वैल्यू को अडजस्ट करने के लिए, लाइटनेस, क्रोमा, और रंग के चैनलों को अडजस्ट किया जाता है. --i, वैल्यू के ग्रेडेशन के लिए सूची में सिबलिंग इंडेक्स है. इससे पता चलता है कि थीम बनाने के लिए, कस्टम प्रॉपर्टी और रिलेटिव कलर सिंटैक्स के साथ-साथ स्टेपिंग को कैसे जोड़ा जा सकता है.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark() फ़ंक्शन

light-dark() फ़ंक्शन के साथ-साथ, थीमिंग की सुविधा को ज़्यादा डाइनैमिक और आसान बना दिया गया है.

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

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

अगर उपयोगकर्ता ने हल्के रंग वाली थीम चुनी है, तो बटन का बैकग्राउंड हल्के नीले रंग का होगा. अगर उपयोगकर्ता ने गहरे रंग वाली थीम चुनी है, तो बटन का बैकग्राउंड गहरे नीले रंग का होगा.

:has() चुनने वाला

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

:has() सिलेक्टर की मदद से, यह देखा जा सकता है कि किसी चाइल्ड एलिमेंट में कुछ खास चाइल्ड एलिमेंट हैं या नहीं. साथ ही, यह भी देखा जा सकता है कि वे चाइल्ड एलिमेंट किसी खास स्थिति में हैं या नहीं. यह सिलेक्टर, पैरंट सिलेक्टर के तौर पर भी काम कर सकता है.

:has(), कई कंपनियों के लिए पहले से ही बहुत काम का साबित हुआ है. इनमें PolicyBazaar भी शामिल है. यह कंपनी, :has() का इस्तेमाल करके अपने इंटीरियर कॉन्टेंट के आधार पर ब्लॉक को स्टाइल करती है. जैसे, तुलना वाले सेक्शन में, अगर ब्लॉक में तुलना करने की योजना है, तो स्टाइल अपने-आप बदल जाती है. अगर ब्लॉक खाली है, तो भी स्टाइल बदल जाती है.

“:has() सिलेक्टर की मदद से, हम उपयोगकर्ता के चुने गए विकल्प की पुष्टि करने के लिए JavaScript का इस्तेमाल नहीं कर रहे हैं. इसके बजाय, हम CSS का इस्तेमाल कर रहे हैं. यह हमारे लिए पहले की तरह ही काम कर रहा है.–अमन सोनी, टेक लीड, PolicyBazaar”

कंटेनर क्वेरी

वेब में एक और अहम सुविधा जोड़ी गई है. यह सुविधा अब नई है और इसका इस्तेमाल बढ़ता जा रहा है. यह कंटेनर क्वेरी है. इससे किसी एलिमेंट के पैरंट के इंट्रिंसिक साइज़ के बारे में क्वेरी की जा सकती है, ताकि स्टाइल लागू की जा सकें. यह मीडिया क्वेरी से ज़्यादा बेहतर है, क्योंकि मीडिया क्वेरी सिर्फ़ व्यूपोर्ट के साइज़ के बारे में क्वेरी करती है.

Angular ने हाल ही में angular.dev पर एक नई दस्तावेज़ साइट लॉन्च की है. इसमें कंटेनर क्वेरी का इस्तेमाल किया गया है. इससे पेज पर उपलब्ध जगह के हिसाब से हेडर ब्लॉक को स्टाइल किया जा सकता है. इसलिए, लेआउट बदलने पर भी हेडर ब्लॉक अपने-आप अडजस्ट हो सकते हैं. भले ही, लेआउट मल्टीकॉलम साइडबार लेआउट से बदलकर सिंगल-कॉलम लेआउट हो जाए.

कंटेनर क्वेरी के बिना, इस तरह की स्टाइलिंग करना बहुत मुश्किल था. साथ ही, इससे परफ़ॉर्मेंस पर भी बुरा असर पड़ता था. इसके लिए, रीसाइज़ ऑब्ज़र्वर और एलिमेंट ऑब्ज़र्वर की ज़रूरत होती थी. अब, पैरंट के साइज़ के आधार पर किसी एलिमेंट को स्टाइल करना बहुत आसान हो गया है.

@property

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

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

नतीजा

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

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

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

इन नई सुविधाओं के बारे में ज़्यादा जानने के लिए, developer.chrome.com और web.dev पर जाएं. यहां हमारी टीम, वेब टेक्नोलॉजी से जुड़ी नई जानकारी शेयर करती है. स्क्रोल करने पर दिखने वाले ऐनिमेशन, व्यू ट्रांज़िशन, ऐंकर पोज़िशनिंग या स्टाइल किए जा सकने वाले 'चुने' विकल्प को आज़माएं. साथ ही, हमें बताएं कि आपको यह कैसा लगा. हम आपकी बात सुनने और आपकी मदद करने के लिए हमेशा तैयार हैं.