सीएसएस की स्थिति 2022

Google I/O 2022 में दिखाई गई, आज और आने वाले समय में वेब स्टाइलिंग की सुविधाएँ. साथ ही, कुछ अतिरिक्त सुविधाएँ.

Adam Argyle

साल 2022, CSS के लिए सबसे अहम सालों में से एक होने वाला है. इस साल, CSS की कई नई सुविधाएं लॉन्च की जाएंगी. साथ ही, ब्राउज़र के साथ मिलकर काम करने वाली सुविधाओं को भी रिलीज़ किया जाएगा. इन सभी सुविधाओं को लॉन्च करने का मकसद, 14 सुविधाओं को लागू करना है!

खास जानकारी

यह पोस्ट, Google I/O 2022 में दिए गए भाषण का लेख वाला वर्शन है. इसका मकसद हर सुविधा के बारे में पूरी जानकारी देना नहीं है. इसके बजाय, इसका मकसद आपको हर सुविधा के बारे में कम शब्दों में जानकारी देना है, ताकि आपकी दिलचस्पी बढ़ सके. इसमें हर सुविधा के बारे में कम शब्दों में जानकारी दी गई है, ताकि आपको हर सुविधा के बारे में कम शब्दों में जानकारी मिल सके. अगर आपको इसमें दिलचस्पी है, तो ज़्यादा जानकारी के लिए, किसी सेक्शन के आखिर में दिए गए संसाधन लिंक देखें.

कॉन्टेंट का टेबल

अपनी पसंद के विषयों पर जाने के लिए, यहां दी गई सूची का इस्तेमाल करें:

ब्राउज़र के साथ काम करना

सीएसएस की कई सुविधाओं को एक साथ रिलीज़ करने की मुख्य वजह, Interop 2022 के प्रयासों की वजह से है. इंटरऑप के बारे में जानने से पहले, Compat 2021 के बारे में जानना ज़रूरी है.

Compat 2021

साल 2021 के लिए तय किए गए लक्ष्यों को पूरा करने के लिए, सर्वे के ज़रिए डेवलपर से मिले सुझावों को ध्यान में रखा गया. इन लक्ष्यों में, मौजूदा सुविधाओं को बेहतर बनाना, टेस्ट सुइट को बेहतर बनाना, और पांच सुविधाओं के लिए ब्राउज़र के पासिंग स्कोर को बढ़ाना शामिल था:

1. sticky पोज़िशनिंग
2. aspect-ratio साइज़ बदलने की सुविधा
3. flex लेआउट
4. grid लेआउट
5. transform पोज़िशनिंग और ऐनिमेशन

सभी टेस्ट में स्कोर बढ़ाए गए हैं. इससे पता चलता है कि मॉडल की स्थिरता और भरोसेमंद होने की क्षमता बेहतर हुई है. इन टीमों को हमारी ओर से ढेर सारी बधाई!

Interop 2022

इस साल, ब्राउज़र बनाने वाली कंपनियों ने मिलकर उन सुविधाओं और प्राथमिकताओं पर चर्चा की जिन पर उन्हें काम करना था. उन्होंने डेवलपर के लिए, वेब की ये सुविधाएं उपलब्ध कराने का प्लान बनाया है:

1. @layer
2. कलर स्पेस और फ़ंक्शन
3. कंटेनमेंट
4. <dialog>
5. फ़ॉर्म के साथ काम करने की सुविधा
6. स्क्रोल करना
7. सबग्रिड
8. मुद्रण कला
9. व्यूपोर्ट यूनिट
10. वेब कंपैट

यह एक दिलचस्प और महत्वाकांक्षी सूची है. मैं इसे देखने के लिए बेताब हूं.

साल 2022 के नए गाने

इसमें कोई हैरानी की बात नहीं है कि सीएसएस 2022 की स्थिति पर, Interop 2022 के काम का काफ़ी असर पड़ा है.

कैस्केड लेयर

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

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

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

Chrome DevTools की मदद से यह देखा जा सकता है कि कौनसी स्टाइल किस लेयर से आ रही हैं:

संसाधन

• सीएसएस कैस्केड 5 स्पेसिफ़िकेशन
• कैस्केड लेयर के बारे में जानकारी
• MDN पर कैस्केड लेयर
• उना क्रावेट्स: कैस्केड लेयर
• अहमद शदीद: Hello, CSS Cascade Layers

सबग्रिड

subgrid से पहले, किसी अन्य ग्रिड के अंदर मौजूद ग्रिड, अपने पैरंट सेल या ग्रिड लाइनों के साथ अलाइन नहीं हो पाता था. हर ग्रिड लेआउट यूनीक था. कई डिज़ाइनर, अपने पूरे डिज़ाइन पर एक ही ग्रिड रखते हैं और उसमें मौजूद आइटम को लगातार अलाइन करते हैं. ऐसा CSS में नहीं किया जा सकता.

subgrid के बाद, ग्रिड में मौजूद कोई बच्चा अपने माता-पिता के कॉलम या लाइनों को अपना सकता है. साथ ही, खुद को या बच्चों को उनके साथ अलाइन कर सकता है!

यहां दिए गए डेमो में, बॉडी एलिमेंट तीन कॉलम वाली क्लासिक ग्रिड बनाता है: बीच वाले कॉलम को main कहा जाता है. साथ ही, बाएं और दाएं कॉलम अपनी लाइनों के नाम fullbleed देते हैं. इसके बाद, बॉडी में मौजूद हर एलिमेंट, <nav> और <main>, grid-template-columns: subgrid को सेट करके बॉडी से नाम वाली लाइनों को अपनाता है.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

आखिर में, <nav> या <main> साल के बच्चे, fullbleed और main कॉलम और लाइनों का इस्तेमाल करके, खुद को अलाइन या साइज़ कर सकते हैं.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

Devtools की मदद से, लाइनों और सबग्रिड को देखा जा सकता है. फ़िलहाल, यह सुविधा सिर्फ़ Firefox में उपलब्ध है. नीचे दी गई इमेज में, पैरंट ग्रिड और सबग्रिड को ओवरले किया गया है. अब यह लेआउट, डिज़ाइनर की सोच के मुताबिक है.

DevTools के एलिमेंट पैनल में, यह देखा जा सकता है कि कौनसे एलिमेंट ग्रिड और सबग्रिड हैं. यह लेआउट को डीबग करने या उसकी पुष्टि करने के लिए बहुत मददगार होता है.

संसाधन

• सबग्रिड की खास बातें
• MDN पर सबग्रिड
• Bramus: Practical CSS Subgrid Video Tutorials

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

@container से पहले, किसी वेबपेज के एलिमेंट सिर्फ़ पूरे व्यूपोर्ट के साइज़ के हिसाब से रिस्पॉन्स देते थे. यह मैक्रो लेआउट के लिए बहुत अच्छा है. हालांकि, माइक्रो लेआउट के लिए ऐसा नहीं है. माइक्रो लेआउट में, आउटर कंटेनर पूरे व्यूपोर्ट में नहीं होता. इसलिए, लेआउट को उसके हिसाब से अडजस्ट नहीं किया जा सकता.

@container के बाद, एलिमेंट पैरंट कंटेनर के साइज़ या स्टाइल के हिसाब से रिस्पॉन्स कर सकते हैं! हालांकि, कंटेनर को खुद को क्वेरी के संभावित टारगेट के तौर पर घोषित करना होगा. यह एक छोटी सी ज़रूरी शर्त है, लेकिन इससे बहुत फ़ायदा मिलता है.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

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

calendar-day कंटेनर के साइज़ के बारे में क्वेरी करने के लिए यहां सीएसएस दी गई है. इसके बाद, लेआउट और फ़ॉन्ट के साइज़ में बदलाव किया जा सकता है:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

यहां एक और उदाहरण दिया गया है: एक बुक कॉम्पोनेंट, उस कॉलम में मौजूद जगह के हिसाब से अपने-आप अडजस्ट हो जाता है जिसमें उसे ड्रैग किया गया है:

उना ने स्थिति का आकलन सही तरीके से किया है. यह नया रिस्पॉन्सिव है. @container का इस्तेमाल करते समय, डिज़ाइन से जुड़े कई दिलचस्प और अहम फ़ैसले लिए जा सकते हैं.

संसाधन

• कंटेनर क्वेरी की खास बातें
• कंटेनर क्वेरी के बारे में जानकारी
• MDN पर कंटेनर क्वेरी
• web.dev पर नया रिस्पॉन्सिव लेआउट
• Una का कैलेंडर डेमो
• कंटेनर क्वेरी का बेहतरीन कलेक्शन
• हमने web.dev पर Designcember कैसे बनाया
• अहमद शदीद: Say Hello To CSS Container Queries

accent-color

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

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

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

accent-color के बारे में ज़्यादा जानने के लिए, web.dev पर मेरी पोस्ट पढ़ें. इसमें मैंने इस काम की CSS प्रॉपर्टी के बारे में कई और पहलुओं पर बात की है.

संसाधन

• accent-color स्पेसिफ़िकेशन
• MDN पर ऐक्सेंट-कलर
• web.dev पर ऐक्सेंट-कलर
• Bramus: Tint User-Interface Controls with CSS accent-color

कलर लेवल 4 और 5

पिछले कुछ दशकों से, वेब पर sRGB का इस्तेमाल सबसे ज़्यादा किया जा रहा है. हालांकि, डिजिटल दुनिया में हाई-डेफ़िनिशन डिसप्ले और OLED या QLED स्क्रीन वाले मोबाइल डिवाइसों का इस्तेमाल बढ़ता जा रहा है. ऐसे में, sRGB काफ़ी नहीं है. इसके अलावा, उपयोगकर्ताओं की प्राथमिकताओं के हिसाब से डाइनैमिक पेजों को अडैप्ट करने की उम्मीद की जाती है. साथ ही, डिज़ाइनर, डिज़ाइन सिस्टम, और कोड को बनाए रखने वाले लोगों के लिए, कलर मैनेजमेंट एक बड़ी समस्या रही है.

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

रंग से जुड़ी इन सभी सुविधाओं से पहले, डिज़ाइन सिस्टम को सही कॉन्ट्रास्ट वाले रंगों का पहले से हिसाब लगाना पड़ता था. साथ ही, यह पक्का करना पड़ता था कि पैलेट सही तरीके से वाइब्रेंट हों. यह सब काम प्रीप्रोसेसर या JavaScript करते थे.

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

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

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

इस कलर फ़ंक्शन का इस्तेमाल करने पर, sRGB कलर स्पेस के रंग मिलते हैं. ये रंग, HSL और RGB के रंगों जैसे ही होते हैं. साल 2022 में, इस सुविधा के तहत आपको नए रंग नहीं मिलेंगे. हालांकि, इससे सिंटैक्स और मेंटल मॉडल के फ़ॉलोअर के लिए कुछ टास्क आसान हो सकते हैं.

संसाधन

• HWB की खास जानकारी
• MDN पर HWB
• Stefan Judis: hwb() – a color notation for humans?

कलर स्पेस

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

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

color-mix()

color-mix() से पहले, डेवलपर और डिज़ाइनर को प्रीप्रोसेसर की ज़रूरत होती थी. जैसे, Sass. इसकी मदद से, वे ब्राउज़र में रंग दिखाने से पहले उन्हें मिक्स कर पाते थे. ज़्यादातर कलर-मिक्सिंग फ़ंक्शन में, यह तय करने का विकल्प भी नहीं होता था कि किस कलर स्पेस में मिक्सिंग करनी है. इस वजह से, कभी-कभी नतीजे समझ में नहीं आते थे.

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

अक्सर, ब्रैंड के रंग को बेस के तौर पर इस्तेमाल किया जाता है और इससे अलग-अलग रंग बनाए जाते हैं. जैसे, होवर स्टाइल के लिए हल्के या गहरे रंग. color-mix() के साथ यह इस तरह दिखेगा:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

अगर आपको उन रंगों को किसी दूसरे कलर स्पेस, जैसे कि srgb में मिक्स करना है, तो इसे बदलें:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

यहां color-mix() का इस्तेमाल करके, थीमिंग का डेमो दिया गया है. ब्रैंड का रंग बदलकर देखें और थीम को अपडेट करें:

साल 2022 में, अपनी स्टाइलशीट में अलग-अलग कलर स्पेस में रंगों को मिक्स करने का आनंद लें!

संसाधन

• color-mix() स्पेसिफ़िकेशन
• MDN पर color-mix() फ़ंक्शन के बारे में जानकारी
• थीमिंग डेमो
• थीम बनाने का दूसरा डेमो
• Fabio Giolito: सीएसएस की इन नई सुविधाओं की मदद से, कलर थीम बनाएं

color-contrast()

color-contrast() से पहले, स्टाइलशीट के लेखकों को पहले से ही ऐक्सेस किए जा सकने वाले रंगों के बारे में पता होना चाहिए था. अक्सर, पैलेट में किसी रंग के स्वैच पर काले या सफ़ेद रंग का टेक्स्ट दिखता है. इससे रंग सिस्टम का इस्तेमाल करने वाले व्यक्ति को यह पता चलता है कि उस स्वैच के साथ सही कंट्रास्ट बनाने के लिए, किस रंग के टेक्स्ट की ज़रूरत होगी.

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

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

सिंटैक्स का बुनियादी स्ट्रक्चर इस तरह दिखता है. इसमें फ़ंक्शन को ग्रे रंग दिया जाता है और ब्राउज़र यह तय करता है कि ब्लैक या व्हाइट में सबसे ज़्यादा कॉन्ट्रास्ट है या नहीं:

color: color-contrast(gray);

इस फ़ंक्शन को रंगों की सूची के हिसाब से भी पसंद के मुताबिक बनाया जा सकता है. इससे यह फ़ंक्शन, चुने गए रंगों में से सबसे अलग रंग को चुन पाएगा:

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

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

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

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

संसाधन

• color-contrast() स्पेसिफ़िकेशन
• MDN पर color-contrast() के बारे में जानकारी
• डेमो

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

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

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

सिंटैक्स के इस उदाहरण में, एक बेस हेक्स दिया गया है और इसके हिसाब से दो नए रंग बनाए गए हैं. पहला रंग --absolute-change, बेस कलर से एलसीएच में एक नया रंग बनाता है. इसके बाद, बेस कलर की चमक को 75% से बदल देता है. हालांकि, क्रोमा (c) और रंगत (h) को बनाए रखता है. दूसरा रंग --relative-change, बेस कलर से एलसीएच में एक नया रंग बनाता है. हालांकि, इस बार क्रोमा (c) को 20% कम कर देता है.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

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

नीचे दिए गए डेमो में, मैंने किसी रंग के हल्के और गहरे वैरिएंट बनाने के लिए, रिलेटिव कलर सिंटैक्स का इस्तेमाल किया है. साथ ही, यह पक्का करने के लिए color-contrast() का इस्तेमाल किया है कि लेबल में सही कंट्रास्ट हो:

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

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

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

संसाधन

• रिलेटिव कलर सिंटैक्स की खास जानकारी
• रिलेटिव कलर सिंटैक्स की मदद से कलर पैलेट बनाना
• रिलेटिव कलर सिंटैक्स का इस्तेमाल करके, कलर वैरिएंट बनाना

ग्रेडिएंट कलर स्पेस

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

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

सिंटैक्स को ग्रेडिएंट की दिशा के बाद जोड़ा जाता है. इसमें नए in सिंटैक्स का इस्तेमाल किया जाता है. हालांकि, इसे जोड़ना ज़रूरी नहीं है:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

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

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

ज़्यादा जानकारी, उदाहरण, और टिप्पणियों के लिए, यह Twitter थ्रेड पढ़ें.

संसाधन

• ग्रेडिएंट इंटरपोलेशन की खास बातें
• स्पेस में ग्रेडिएंट की तुलना करने वाला डेमो
• Observable नोटबुक में ग्रेडिएंट की तुलना करना

inert

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

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

इसका एक अच्छा उदाहरण, JavaScript का alert() फ़ंक्शन है:

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

यहां एक छोटा कोड सैंपल दिया गया है, ताकि आपको पता चल सके कि यह कैसे काम करता है:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

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

संसाधन

• Inert specification
• MDN पर कोई कार्रवाई नहीं की गई
• Chrome Developers: Introducing inert

COLRv1 फ़ॉन्ट

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

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

यहां Chrome डेवलपर ब्लॉग पोस्ट से लिया गया इमोजी का एक उदाहरण दिया गया है. आपने शायद यह देखा होगा कि इमोजी के फ़ॉन्ट का साइज़ बढ़ाने पर, वह साफ़ नहीं दिखता. यह एक इमेज है, न कि वेक्टर आर्ट. अक्सर ऐप्लिकेशन में इमोजी का इस्तेमाल करने पर, उसे बेहतर क्वालिटी वाली ऐसेट से बदल दिया जाता है. COLRv1 फ़ॉन्ट की मदद से, इमोजी को वेक्टर और सुंदर बनाया जा सकता है:

आइकॉन फ़ॉन्ट, इस फ़ॉर्मैट के साथ कुछ बेहतरीन काम कर सकते हैं. जैसे, कस्टम डुओ-टोन कलर पैलेट और अन्य सुविधाएं उपलब्ध कराना. COLRv1 फ़ॉन्ट को लोड करना, किसी अन्य फ़ॉन्ट फ़ाइल को लोड करने जैसा ही होता है:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

COLRv1 फ़ॉन्ट को पसंद के मुताबिक बनाने के लिए, @font-palette-values का इस्तेमाल किया जाता है. यह एक खास सीएसएस ऐट-रूल है. इसका इस्तेमाल, पसंद के मुताबिक बनाने के विकल्पों के सेट को ग्रुप करने और उन्हें नाम देने के लिए किया जाता है, ताकि बाद में उनका रेफ़रंस दिया जा सके. ध्यान दें कि कस्टम प्रॉपर्टी की तरह ही, कस्टम नाम कैसे तय किया जाता है. इसकी शुरुआत -- से होती है:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

कस्टमाइज़ेशन के लिए, --colorized को एलियास के तौर पर इस्तेमाल किया जाता है. आखिरी चरण में, पैलेट को उस एलिमेंट पर लागू करना होता है जो कलर फ़ॉन्ट फ़ैमिली का इस्तेमाल कर रहा है:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

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

संसाधन

• Github पर Colrv1 स्पेसिफ़िकेशन
• Chrome Developers: Colrv1 Fonts
• BlinkOn डेवलपर के लिए जानकारी देने वाला वीडियो

व्यूपोर्ट यूनिट

व्यूपोर्ट के नए वर्शन से पहले, वेब पर फ़िज़िकल यूनिट उपलब्ध कराई जाती थीं. इससे व्यूपोर्ट को फ़िट करने में मदद मिलती थी. इनमें से एक ऊंचाई, चौड़ाई, सबसे छोटे साइज़ (vmin), और सबसे बड़े साइज़ (vmax) के लिए था. इनसे कई काम आसानी से हो जाते थे, लेकिन मोबाइल ब्राउज़र की वजह से समस्याएं आने लगीं.

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

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

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

यहां व्यूपोर्ट के नए वैरिएंट के साथ उपलब्ध कराए गए, व्यूपोर्ट यूनिट के सभी नए विकल्पों की पूरी सूची दी गई है:

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

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

संसाधन

• व्यू पोर्ट के हिसाब से यूनिट तय करने की जानकारी
• Bramus: The Large, Small, and Dynamic Viewports

:has()

:has() से पहले, सलेक्टर का विषय हमेशा आखिर में होता था. उदाहरण के लिए, इस सिलेक्टर का विषय सूची में दिया गया आइटम है: ul > li. स्यूडो सिलेक्टर, सिलेक्टर में बदलाव कर सकते हैं. हालांकि, वे विषय को नहीं बदलते: ul > li:hover या ul > li:not(.selected).

:has() के बाद, एलिमेंट ट्री में ऊपर मौजूद कोई विषय, बच्चों के बारे में क्वेरी करते समय भी विषय बना रह सकता है: ul:has(> li). यह समझना आसान है कि :has() को "पैरंट सिलेक्टर" का सामान्य नाम कैसे मिला, क्योंकि इस मामले में सिलेक्टर का विषय अब पैरंट है.

यहां सिंटैक्स का एक बुनियादी उदाहरण दिया गया है. इसमें क्लास .parent विषय बनी रहती है, लेकिन इसे सिर्फ़ तब चुना जाता है, जब किसी चाइल्ड एलिमेंट में .child क्लास मौजूद हो:

.parent:has(.child) {...}

यहां एक उदाहरण दिया गया है, जिसमें <section> एलिमेंट सब्जेक्ट है. हालांकि, सिलेक्टर सिर्फ़ तब मैच होता है, जब किसी चाइल्ड में :focus-visible मौजूद हो:

section:has(*:focus-visible) {...}

:has() सिलेक्टर, ज़्यादा व्यावहारिक इस्तेमाल के उदाहरणों के साथ एक बार फिर से शानदार टूल बन जाता है. उदाहरण के लिए, फ़िलहाल इमेज रैप करते समय <a> टैग नहीं चुने जा सकते. इस वजह से, ऐंकर टैग को यह सिखाना मुश्किल हो जाता है कि इस्तेमाल के इस उदाहरण में, अपनी स्टाइल कैसे बदलें. हालांकि, की मदद से ऐसा किया जा सकता है::has()

a:has(> img) {...}

इन सभी उदाहरणों में, :has() सिर्फ़ पैरंट सिलेक्टर की तरह दिखता है. <figure> एलिमेंट में मौजूद इमेज के इस्तेमाल के उदाहरण पर विचार करें. साथ ही, अगर फ़िगर में <figcaption> है, तो इमेज के स्टाइल में बदलाव करें. यहां दिए गए उदाहरण में, figcaption के साथ फ़िगर चुने गए हैं. इसके बाद, उस कॉन्टेक्स्ट में मौजूद इमेज चुनी गई हैं. :has() का इस्तेमाल किया गया है और इससे विषय में कोई बदलाव नहीं हुआ है, क्योंकि हमारा टारगेट इमेज हैं, न कि आंकड़े:

figure:has(figcaption) img {...}

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

@supports और इसके selector() फ़ंक्शन की मदद से, यह आसानी से पता लगाया जा सकता है कि ब्राउज़र में सुविधा काम करती है या नहीं. यह फ़ंक्शन, सिंटैक्स का इस्तेमाल करने से पहले यह जांच करता है कि ब्राउज़र को सिंटैक्स समझ में आता है या नहीं:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

संसाधन

• :has() स्पेसिफ़िकेशन
• MDN पर:has()
• सीएसएस :has() सिलेक्टर, "पैरंट सिलेक्टर" से कहीं ज़्यादा है

2022 और उसके बाद

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

अगले सेक्शन में दी गई जानकारी से आपको यह पता चलेगा कि यहां बताई गई समस्याओं को हल करने के लिए, कई कंपनियों के लोग कोशिश कर रहे हैं. इसका मतलब यह नहीं है कि इन समस्याओं के समाधान 2023 में रिलीज़ किए जाएंगे.

लूज़ली टाइप की गई कस्टम प्रॉपर्टी

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

मान लें कि किसी box-shadow ने अपनी वैल्यू के लिए कस्टम प्रॉपर्टी का इस्तेमाल किया है:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

यह सब तब तक ठीक से काम करता है, जब तक किसी प्रॉपर्टी की वैल्यू को ऐसी वैल्यू में नहीं बदल दिया जाता जिसे सीएसएस स्वीकार नहीं करती. जैसे, --x: red. अगर नेस्ट किए गए किसी भी वैरिएबल की वैल्यू मौजूद नहीं है या उसे अमान्य वैल्यू टाइप पर सेट किया गया है, तो पूरी शैडो टूट जाती है.

ऐसे में, @property काम आता है: --x को टाइप की गई कस्टम प्रॉपर्टी बनाया जा सकता है. यह अब ढीली और फ़्लेक्सिबल नहीं रहेगी, बल्कि कुछ तय सीमाओं के साथ सुरक्षित रहेगी:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

अब जब box-shadow, var(--x) का इस्तेमाल करता है और बाद में --x: red का इस्तेमाल करने की कोशिश की जाती है, तो red को अनदेखा कर दिया जाएगा, क्योंकि यह <length> नहीं है. इसका मतलब है कि शैडो काम करती रहेगी, भले ही उसकी किसी कस्टम प्रॉपर्टी को अमान्य वैल्यू दी गई हो. इसके बजाय, यह 0px के initial-value पर वापस आ जाता है.

ऐनिमेशन

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

इस डेमो उदाहरण पर विचार करें. इसमें, ओवरले के एक हिस्से को बनाने के लिए रेडियल ग्रेडिएंट का इस्तेमाल किया गया है. इससे स्पॉटलाइट फ़ोकस इफ़ेक्ट बनता है. JavaScript, alt/opt कुंजी दबाने पर माउस x और y सेट करती है. इसके बाद, फ़ोकल साइज़ को 25% जैसी छोटी वैल्यू में बदल देती है. इससे माउस की पोज़िशन पर स्पॉटलाइट फ़ोकस सर्कल बन जाता है:

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

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

इस फ़ोकस इफ़ेक्ट का इस्तेमाल करने वाले वीडियो गेम में, सर्कल हमेशा ऐनिमेट होता है. यह बड़े सर्कल से पिनहोल सर्कल में बदलता है. हमारे डेमो के साथ @property का इस्तेमाल करने का तरीका यहां बताया गया है, ताकि ब्राउज़र ग्रेडिएंट मास्क को ऐनिमेट कर सके:

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

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

@property में और भी कई सुविधाएं हैं, लेकिन इन छोटी-छोटी सुविधाओं को चालू करने से आपको काफ़ी फ़ायदा मिल सकता है.

संसाधन

• @property specification
• @property on MDN
• web.dev पर@property
• ज़ूम फ़ोकस का डेमो
• CSS Tricks: Exploring @property and its animating powers

min-width या max-width में था

मीडिया क्वेरी की रेंज से पहले, सीएसएस मीडिया क्वेरी में min-width और max-width का इस्तेमाल किया जाता है, ताकि यह बताया जा सके कि कौनसी शर्तें पूरी हुई हैं और कौनसी नहीं. यह इस तरह दिख सकता है:

@media (min-width: 320px) {
  …
}

मीडिया क्वेरी की रेंज के बाद, वही मीडिया क्वेरी कुछ ऐसी दिख सकती है:

@media (width >= 320px) {
  …
}

min-width और max-width, दोनों का इस्तेमाल करने वाली सीएसएस मीडिया क्वेरी ऐसी दिख सकती है:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

मीडिया क्वेरी की रेंज के बाद, वही मीडिया क्वेरी कुछ ऐसी दिख सकती है:

@media (320px <= width <= 1280px) {
  …
}

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

संसाधन

• मीडिया क्वेरी रेंज सिंटैक्स की खास जानकारी
• MDN पर मीडिया क्वेरी रेंज सिंटैक्स
• Media query range syntax PostCSS plugin

कोई मीडिया क्वेरी वैरिएबल नहीं

@custom-media से पहले, मीडिया क्वेरी को बार-बार दोहराना पड़ता था या बिल्ड टाइम के दौरान स्टैटिक वैरिएबल के आधार पर सही आउटपुट जनरेट करने के लिए, प्रीप्रोसेसर पर भरोसा करना पड़ता था.

@custom-media के बाद, सीएसएस में मीडिया क्वेरी को एलियास करने और उन्हें रेफ़रंस करने की अनुमति होती है. यह कस्टम प्रॉपर्टी की तरह ही होता है.

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

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

अब जब उन्हें तय कर लिया गया है, तो मैं इनमें से किसी एक का इस्तेमाल इस तरह कर सकता/सकती हूं:

@media (--OSdark) {
  :root {
    …
  }
}

मुझे Open Props नाम की सीएसएस कस्टम प्रॉपर्टी लाइब्रेरी में इस्तेमाल की गई कस्टम मीडिया क्वेरी की पूरी सूची दिखाओ.

संसाधन

• कस्टम मीडिया क्वेरी के बारे में खास जानकारी
• Custom media queries PostCSS plugin

नेस्टिंग सिलेक्टर बहुत अच्छे होते हैं

@nest से पहले, स्टाइलशीट में कई बार एक ही तरह की जानकारी दी जाती थी. जब सिलेक्टर लंबे होते थे और हर सिलेक्टर में छोटे-छोटे अंतर होते थे, तब यह खास तौर पर मुश्किल हो जाता था. नेस्टिंग की सुविधा, प्रीप्रोसेसर को अपनाने की सबसे सामान्य वजहों में से एक है.

@nest के बाद, दोहराने की सुविधा बंद हो जाती है. प्रीप्रोसेसर की सुविधा वाली नेस्टिंग की करीब-करीब हर सुविधा, सीएसएस में उपलब्ध कराई जाएगी.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

नेस्टिंग के बारे में मेरे लिए सबसे ज़रूरी बात यह है कि नेस्ट किए गए सिलेक्टर में article को दोहराया नहीं जाता. इसके अलावा, स्टाइलिंग का कॉन्टेक्स्ट एक ही स्टाइल ब्लॉक में रहता है. रीडर को एक सिलेक्टर और उसकी स्टाइल से दूसरे सिलेक्टर और उसकी स्टाइल पर ले जाने के बजाय (उदाहरण 1), लेख के कॉन्टेक्स्ट में ही रखा जा सकता है. साथ ही, उसे यह दिखाया जा सकता है कि लेख में मौजूद लिंक का मालिकाना हक किसके पास है. रिश्ते और स्टाइल के इंटेंट को एक साथ बंडल किया जाता है, इसलिए article को अपनी स्टाइल दिखाने का मौका मिलता है.

मालिकाना हक को केंद्रीकरण के तौर पर भी देखा जा सकता है. स्टाइलशीट में काम की स्टाइल ढूंढने के बजाय, उन्हें एक साथ किसी कॉन्टेक्स्ट में नेस्ट किया जा सकता है. यह पैरंट से चाइल्ड रिलेशनशिप के साथ-साथ चाइल्ड से पैरंट रिलेशनशिप के साथ भी काम करता है.

यहां एक कॉम्पोनेंट चाइल्ड का उदाहरण दिया गया है, जो अलग-अलग पैरंट कॉन्टेक्स्ट में खुद को अडजस्ट करना चाहता है. इसके उलट, पैरंट कॉम्पोनेंट स्टाइल को मैनेज करता है और चाइल्ड कॉम्पोनेंट में बदलाव करता है:

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

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

संसाधन

• @nest specification
• @nest PostCSS plugin
• Bramus: The future of CSS: Nesting Selectors

स्टाइल को स्कोप करना बहुत मुश्किल है

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

@scope के बाद, स्टाइल को सिर्फ़ किसी कॉन्टेक्स्ट, जैसे कि क्लास के दायरे में नहीं रखा जा सकता. साथ ही, यह भी बताया जा सकता है कि स्टाइल कहां खत्म होती हैं और कैस्केड या इनहेरिट नहीं होती हैं.

यहां दिए गए उदाहरण में, BEM नेमिंग कन्वेंशन स्कोपिंग को असल मकसद में बदला जा सकता है. इस उदाहरण में, BEM सिलेक्टर, header एलिमेंट के रंग को नामकरण के नियमों के साथ .card कंटेनर के स्कोप में लाने की कोशिश कर रहा है. इसके लिए, हेडर में यह क्लासनेम होना ज़रूरी है. इससे लक्ष्य पूरा हो जाता है. @scope की मदद से, हेडर एलिमेंट को मार्क अप किए बिना एक ही लक्ष्य को पूरा करने के लिए, नाम रखने के किसी भी नियम का पालन करने की ज़रूरत नहीं होती:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

यहां एक और उदाहरण दिया गया है. यह कॉम्पोनेंट के हिसाब से कम और सीएसएस के ग्लोबल स्कोप के बारे में ज़्यादा है. गहरे और हल्के रंग वाली थीम, एक ही स्टाइलशीट में मौजूद होनी चाहिए. इसमें स्टाइल का क्रम मायने रखता है. आम तौर पर, इसका मतलब है कि गहरे रंग वाली थीम की स्टाइल, हल्के रंग वाली थीम के बाद आती हैं. इससे हल्के रंग वाली थीम डिफ़ॉल्ट और गहरे रंग वाली थीम वैकल्पिक स्टाइल के तौर पर सेट हो जाती है. @scope के साथ ऑर्डर करने और स्कोप को लेकर बहस करने से बचें:

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

यहां स्टाइल स्कोप कहां खत्म होता है, यह तय करने के लिए @scope का इस्तेमाल किया जाता है. इसे किसी भी नेमिंग कन्वेंशन या प्रीप्रोसेसर के साथ नहीं किया जा सकता; यह खास है और इसे सिर्फ़ ब्राउज़र में पहले से मौजूद सीएसएस कर सकती है. यहां दिए गए उदाहरण में, img और .content स्टाइल सिर्फ़ तब लागू होती हैं, जब .media-block का कोई चाइल्ड, .content का सिबलिंग या पैरंट हो:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

संसाधन

• @दायरा तय करने वाला स्पेसिफ़ायर
• @scope explainer

मेसनरी लेआउट के लिए कोई सीएसएस तरीका नहीं है

ग्रिड के साथ सीएसएस मेसनरी का इस्तेमाल करने से पहले, मेसनरी लेआउट बनाने का सबसे अच्छा तरीका JavaScript था. ऐसा इसलिए, क्योंकि कॉलम या फ़्लेक्सबॉक्स के साथ सीएसएस के किसी भी तरीके से, कॉन्टेंट के क्रम को गलत तरीके से दिखाया जाता था.

सीएसएस मेसनरी और ग्रिड का इस्तेमाल करने के बाद, किसी भी JavaScript लाइब्रेरी की ज़रूरत नहीं होगी. साथ ही, कॉन्टेंट का क्रम सही होगा.

ऊपर दिया गया डेमो, इस सीएसएस की मदद से बनाया गया है:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

यह जानकर खुशी हुई कि लेआउट की इस रणनीति को शामिल करने पर विचार किया जा रहा है. साथ ही, इसे आज ही Firefox में आज़माया जा सकता है.

संसाधन

• मेज़नरी लेआउट की खास जानकारी
• MDN पर मेसनरी लेआउट
• Smashing Magazine: Native CSS Masonry Layout with CSS Grid

सीएसएस, उपयोगकर्ताओं को डेटा कम करने में मदद नहीं कर सकती

prefers-reduced-data मीडिया क्वेरी से पहले, JavaScript और सर्वर, उपयोगकर्ता के ऑपरेटिंग सिस्टम या ब्राउज़र के "डेटा सेवर" विकल्प के आधार पर अपना व्यवहार बदल सकते थे. हालांकि, सीएसएस ऐसा नहीं कर सकती थी.

prefers-reduced-data मीडिया क्वेरी के बाद, सीएसएस उपयोगकर्ता अनुभव को बेहतर बनाने में मदद कर सकती है. साथ ही, डेटा सेव करने में भी अपनी भूमिका निभा सकती है.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

ऊपर दिए गए सीएसएस का इस्तेमाल इस मीडिया स्क्रोल कॉम्पोनेंट में किया जाता है. इससे काफ़ी बचत हो सकती है. विज़िट किए जा रहे व्यूपोर्ट का साइज़ जितना बड़ा होगा, पेज लोड होने में उतनी ही ज़्यादा बचत होगी. उपयोगकर्ताओं के मीडिया स्क्रोलर से इंटरैक्ट करने पर, सेव करने की प्रोसेस जारी रहती है. सभी इमेज में loading="lazy" एट्रिब्यूट मौजूद हैं. साथ ही, सीएसएस की मदद से एलिमेंट को पूरी तरह से छिपाया गया है. इसका मतलब है कि इमेज के लिए नेटवर्क अनुरोध कभी नहीं किया जाता.

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

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

संसाधन

• prefers-reduced-data specification
• MDN पर prefers-reduced-data चालू है
• GUI में prefers-reduced-data चैलेंज
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Study

स्क्रोल स्नैप करने की सुविधाएं बहुत सीमित हैं

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

नए एपीआई

snapChanging()

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

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

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

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

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

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

यह सीएसएस सिलेक्टर, स्क्रोल स्नैप कंटेनर में मौजूद उन एलिमेंट से मैच करेगा जिन्हें ब्राउज़र ने फ़िलहाल स्नैप किया है.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

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

सीएसएस और JS की इन सुविधाओं को अभी लॉन्च किया गया है. हालांकि, इन सुविधाओं को अपनाने और इनकी टेस्टिंग में मदद करने वाले पॉलीफ़िल पर नज़र रखें.

संसाधन

• Scroll Snap 2 draft specification
• स्क्रोल स्नैप 2 के बारे में जानकारी देने वाले लेख
• Snap के डेमो

जानकार राज्यों के बीच साइकल चलाना

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

toggle() के बाद, सीएसएस के लिए किसी भी एलिमेंट पर कस्टम स्टेट बनाई जा सकती हैं, ताकि सीएसएस उन्हें स्टाइल बदलने और इस्तेमाल करने के लिए इस्तेमाल कर सके. इसमें ग्रुप बनाने, साइकल चलाने, टॉगल करने के लिए निर्देश देने वगैरह की सुविधा मिलती है.

यहां दिए गए उदाहरण में, सूची के आइटम को पूरा होने पर स्ट्राइकथ्रू करने का वही इफ़ेक्ट दिखाया गया है. हालांकि, इसमें किसी भी चेकबॉक्स एलिमेंट का इस्तेमाल नहीं किया गया है:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

साथ ही, इससे जुड़ी सीएसएस toggle() स्टाइल:

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

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

संसाधन

• toggle() ड्राफ़्ट स्पेसिफ़िकेशन
• Bramus: The Future of CSS: CSS Toggles

चुने गए एलिमेंट को पसंद के मुताबिक बनाना

<selectmenu> से पहले, सीएसएस में रिच एचटीएमएल की मदद से <option> एलिमेंट को पसंद के मुताबिक बनाने की सुविधा नहीं थी. साथ ही, विकल्पों की सूची को दिखाने के तरीके में ज़्यादा बदलाव नहीं किया जा सकता था. इस वजह से, डेवलपर को ऐसी बाहरी लाइब्रेरी लोड करनी पड़ीं जो <select> की ज़्यादातर सुविधाओं को फिर से बनाती थीं. इसमें बहुत ज़्यादा काम करना पड़ा.

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

नीचे दिए गए उदाहरण में, <selectmenu> जानकारी देने वाले पेज से लिया गया है. इसमें कुछ बुनियादी विकल्पों के साथ एक नया 'चुने' मेन्यू बनाया गया है:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

सीएसएस, एलिमेंट के इन हिस्सों को टारगेट और स्टाइल कर सकती है:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

वेब एक्सपेरिमेंट फ़्लैग चालू करके, Canary में Chromium पर <selectmenu> एलिमेंट आज़माया जा सकता है. साल 2023 और उसके बाद, मनमुताबिक बनाए जा सकने वाले select मेन्यू एलिमेंट पर नज़र रखें.

संसाधन

• Selectmenu स्पेसिफ़िकेशन
• Selectmenu डेमो

किसी एलिमेंट को दूसरे एलिमेंट से जोड़ना

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

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

अगर आपको इस बारे में ज़्यादा जानना है, तो इस एक्सप्लेनर में कुछ बेहतरीन उदाहरण और कोड सैंपल दिए गए हैं.

संसाधन

• anchor() explainer