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

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

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

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

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

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

@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 पोज़िशनिंग

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

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

स्टाइल चुनने का विकल्प

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

स्क्रीनशॉट चुनना

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

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