सीएसएस और वेब यूज़र इंटरफ़ेस (यूआई) की नई जानकारी: 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 सेट करें. इस मामले में, 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 इवेंट का इस्तेमाल करने के बजाय, सीधे अपनी सीएसएस में क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन को पसंद के मुताबिक बनाएं मल्टी-पेज ऐप्लिकेशन के लिए व्यू ट्रांज़िशन के बारे में ज़्यादा जानने के लिए, Bramus Van Damme का यह टॉक देखें. इसमें, प्री-रेंडरिंग की मदद से व्यू ट्रांज़िशन को सबसे बेहतर तरीके से सेट अप करने का तरीका भी बताया गया है:

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

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

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

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

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

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

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 बटन दबाने या दो बार टॉगल करने पर, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• कॉम्पोनेंट की डिफ़ॉल्ट बाइंडिंग. : यह ब्राउज़र, पॉपओवर को उसके ट्रिगर से सिमैंटिक तौर पर कनेक्ट करता है.

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

“पॉपओवर पर माइग्रेट करके, हमने कोड की हज़ारों लाइनों को हटा दिया है. Popover की मदद से, हमें मैजिक z-index नंबर से जूझने की ज़रूरत नहीं पड़ती... बटन के व्यवहार के बारे में जानकारी देने वाले सही ऐक्सेसिबिलिटी ट्री के साथ-साथ, फ़ोकस के व्यवहार के बारे में जानकारी देने वाले सही ऐक्सेसिबिलिटी ट्री को सेट अप करना आसान हो जाता है. इससे हमारे डिज़ाइन सिस्टम के लिए, पैटर्न को सही तरीके से लागू करना काफ़ी आसान हो जाता है.-कीथ सर्कल, सॉफ़्टवेयर इंजीनियर, 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 के साथ डाइनैमिक ऐंकर की पोज़िशन

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

इसके अलावा, एक और सामान्य इन्वोकर (invoketarget) उपलब्ध है, जिसे Canary में टेस्ट किया जा सकता है. यह दो तीसरे पक्ष के डेवलपर, कीथ सर्कल और ल्यूक वॉरलॉ के काम की वजह से उपलब्ध है. 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 प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसे 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 एलिमेंट के लिए, एक ही नाम की वैल्यू लागू की जाए. इससे, रेडियो बटन के ग्रुप की तरह ही, जानकारी का एक कनेक्टेड ग्रुप बन जाता है

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

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

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

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