सीएसएस और वेब यूज़र इंटरफ़ेस (यूआई) की नई जानकारी: 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%;
}

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

स्क्रोल इफ़ेक्ट के बारे में जानकारी

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

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

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

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

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

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

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

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;
}

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

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

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

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

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

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

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

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

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

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

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

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

Popover API

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

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

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

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

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

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

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

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

ऑब्जेक्ट को स्लाइड में शामिल करने और हटाने के इफ़ेक्ट को ऐनिमेट करना

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

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

allow-discrete कीवर्ड वाली transition-behavior प्रॉपर्टी, ताकि 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 सेट अप करें, ताकि ब्राउज़र को पता चल सके कि इस एलिमेंट को डीओएम में ऐनिमेट करने के लिए कौनसी स्टाइल का इस्तेमाल करना है. ऐसा डायलॉग और बैकग्राउंड, दोनों के लिए किया जाता है. इसके बाद, डायलॉग और बैकड्रॉप, दोनों के लिए ओपन स्टेटस को स्टाइल करें. डायलॉग के लिए, यह open एट्रिब्यूट का इस्तेमाल करता है. वहीं, पॉपओवर के लिए, ::popover-open स्यूडो-एलिमेंट का इस्तेमाल करता है. आखिर में, allow-discrete कीवर्ड का इस्तेमाल करके opacity, display, और overlay को ऐनिमेट करें. इससे, अलग-अलग प्रॉपर्टी के ट्रांज़िशन की सुविधा चालू हो जाएगी.

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

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

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

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

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

स्टाइल में बदला जा सकने वाला चुनने का विकल्प

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

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

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 {
  align-content: center;
}

टेक्स्ट-रैप: बैलेंस और सुंदर

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

कंटेनर से जुड़ी क्वेरी

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

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

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

@property

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

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

नतीजा

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

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

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

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