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

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

स्क्रोल पर आधारित ऐनिमेशन की परफ़ॉर्मेंस से जुड़े फ़ायदे

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

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

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

स्क्रोल इफ़ेक्ट का भविष्य

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

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

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

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

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

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

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

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

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

एक पेज वाले ऐप्लिकेशन में व्यू ट्रांज़िशन को तुरंत चालू करने का तरीका, document.startViewTransition का इस्तेमाल करके किसी इंटरैक्शन को रैप करने जितना आसान है. साथ ही, यह पक्का करना भी आसान है कि ट्रांज़िशन हो रहे हर एलिमेंट में view-transition-name, इनलाइन हो या DOM नोड बनाते समय 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;
}

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

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

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

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

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

अपने 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

पॉपओवर एपीआई

सबसे पहले हमने 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 के कीथ सर्कल की मदद से बनाया गया था.

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

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

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

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

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

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

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

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

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 pseudo-classes. हाल ही में सभी ब्राउज़र में स्थिर रहने वाली, :user-valid और :user-invalid pseudo-classes, :valid और :invalid pseudo-class की तरह काम करती हैं. हालांकि, ये फ़ॉर्म कंट्रोल को सिर्फ़ तब मैच करती हैं, जब कोई उपयोगकर्ता इनपुट के साथ बढ़िया तरीके से इंटरैक्ट करता है. इसका मतलब है कि यह तय करने के लिए बहुत कम कोड की ज़रूरत होती है कि किसी फ़ॉर्म वैल्यू से इंटरैक्ट किया गया है या वह “गंदा” हो गया है. यह उपयोगकर्ता के सुझाव, राय या शिकायत के लिए बहुत काम का हो सकता है. साथ ही, इसमें बहुत सारी स्क्रिप्टिंग कम हो जाती हैं, जो पहले ऐसा करने के लिए ज़रूरी होती हैं.

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(...);
}

उपयोगकर्ता-* फ़ॉर्म की पुष्टि करने वाले pseudo-elements का इस्तेमाल करने के बारे में ज़्यादा जानें.

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>

चुनें में घंटे का इस्तेमाल करने के बारे में ज़्यादा जानें

ज़िंदगी में किए जाने वाले सुधार

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

लुकअहेड के साथ नेस्ट किया जा रहा है

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

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

ब्लॉक लेआउट के लिए कॉन्टेंट अलाइन करें

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

div {
  align-content: center;
}

टेक्स्ट रैप: संतुलन और सुंदर

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

h1 {
  text-wrap: balance;
}

टेक्स्ट रैप: बैलेंस के बारे में ज़्यादा जानें.

अंतरराष्ट्रीय टाइपोग्राफ़ी से जुड़े अपडेट

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

साथ ही, text-spacing-trim, जो विज़ुअल तौर पर ज़्यादा आकर्षक नतीजों के लिए चाइनीज़, जैपनीज़, और कोरियन टाइपोग्राफ़ी में सुधार करता है. इसके लिए, विराम चिह्न वर्णों को आपस में जोड़ा जा सकता है.

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

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

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

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

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

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

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

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

html {
  color-scheme: light dark;
}

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

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

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

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

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

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

“:has() सिलेक्टर की मदद से, हमने JavaScript के आधार पर उपयोगकर्ता के चुने गए विकल्प की पुष्टि को खत्म किया. साथ ही, इसकी जगह एक ऐसा सीएसएस सलूशन जोड़ा जो पहले की तरह ही हमारे लिए अब भी काम कर रहा है.–अमन सोनी, टेक लीड, PolicyBazaar”

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

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

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

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

@property

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

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

नतीजा

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

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

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

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