सीएसएस और वेब यूज़र इंटरफ़ेस (यूआई) की नई जानकारी: 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 for Developers 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 ऐट-रूल का इस्तेमाल करके, व्यू ट्रांज़िशन में शामिल दोनों पेजों के लिए ऑप्ट-इन करें.

@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 का यह टॉक देखें. इसमें, प्री-रेंडरिंग की मदद से व्यू ट्रांज़िशन को सबसे बेहतर तरीके से सेट अप करने का तरीका भी बताया गया है:

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

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

GitHub के होम पेज पर मौजूद .

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

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

एंट्री और एग्ज़िट इफ़ेक्ट को ऐनिमेट करना

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

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

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

@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 सेट अप करें, ताकि ब्राउज़र को पता चल सके कि इस एलिमेंट को DOM में किस स्टाइल से ऐनिमेशन करना है. ऐसा डायलॉग और बैकड्रॉप, दोनों के लिए किया जाता है. इसके बाद, डायलॉग और बैकड्रॉप, दोनों के लिए ओपन स्टेट को स्टाइल करें. डायलॉग के लिए, यह 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 पोज़िशनिंग

डिफ़ॉल्ट तौर पर इस्तेमाल की जाने वाली दिशा के हिसाब से तय की गई पोज़िशनिंग के अलावा, इसमें लेआउट का एक नया तरीका भी शामिल किया गया है. इसे ऐंकर पोज़िशनिंग एपीआई के हिस्से के तौर पर शामिल किया गया है. इसे इंसर्ट एरिया कहा जाता है. इनसेट एरिया की मदद से, पोज़िशन किए गए एलिमेंट को उनके ऐंकर के हिसाब से आसानी से रखा जा सकता है. यह 9-सेल ग्रिड पर काम करता है. इसमें ऐंकरिंग एलिमेंट बीच में होता है. उदाहरण के लिए, 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 ब्लॉक को ऐंकर से कनेक्ट करने के लिए position-try-options का इस्तेमाल करें.

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

#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 के साथ भी इस्तेमाल किया जा सकता है. विकिपीडिया जैसे प्लैटफ़ॉर्म पर दिखने वाली झलकियां, वेब प्लैटफ़ॉर्म पर हर जगह दिखती हैं. इनके साथ इंटरैक्ट किया जा सकता है. साथ ही, किसी लिंक और उपयोगकर्ता की दिलचस्पी दिखाने से पॉपओवर ट्रिगर किया जा सकता है. इसके लिए, क्लिक करने की ज़रूरत नहीं होती. जैसे, होवर करना या टैब फ़ोकस करना.

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

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

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() फ़ंक्शन, कलर थीमिंग के विकल्पों को आसान बनाने के लिए किया गया एक सुधार है. इससे थीम स्टाइल को ज़्यादा संक्षिप्त तरीके से लिखा जा सकता है. इस विज़ुअल डायग्राम में, Adam Argyle ने इसे बहुत अच्छे तरीके से दिखाया है. पहले, थीम के विकल्प सेट अप करने के लिए, आपको कोड के दो अलग-अलग ब्लॉक की ज़रूरत होती थी. जैसे, आपकी डिफ़ॉल्ट थीम और उपयोगकर्ता की पसंद के हिसाब से क्वेरी. अब 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;
}

नतीजा

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

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

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

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