इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

Adam Argyle

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

खास जानकारी

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

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

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

साल 2022 में नई सुविधाएं	साल 2022 और उसके बाद
2022 में ब्राउज़र के साथ काम करना	@scope
@layer	@nest
सबग्रिड	@media (prefers-reduced-data)
@container	@custom-media
hwb()	मीडिया क्वेरी की रेंज
lch, oklch, lab, oklab, display-p3 वगैरह	@प्रॉपर्टी
color-mix()	scroll-start
color-contrast()	:snap-target
रिलेटिव कलर सिंटैक्स	snapChanging() और snapChanged()
ग्रेडिएंट कलर स्पेस	toggle()
accent-color	anchor()
इनर्ट	<selectmenu>
कलर फ़ॉन्ट का वर्शन 1
व्यूपोर्ट यूनिट के वैरिएंट
:has()

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

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

Compat 2021

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

sticky पोज़िशनिंग
aspect-ratio साइज़
flex लेआउट
grid लेआउट
transform पोज़िशनिंग और ऐनिमेशन

टेस्ट के सभी स्कोर बेहतर हुए हैं. इससे, ऐप्लिकेशन की स्थिरता और भरोसेमंदता के बारे में पता चलता है. इन टीमों को बधाई!

Interop 2022

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

@layer
कलर स्पेस और फ़ंक्शन
कंटेनमेंट
<dialog>
फ़ॉर्म के साथ काम करने की सुविधा
स्क्रोल करना
सबग्रिड
मुद्रण कला
व्यूपोर्ट की इकाइयां
वेब के साथ काम करना

यह एक दिलचस्प और महत्वाकांक्षी सूची है. मुझे इसे पूरा होने का इंतज़ार नहीं है.

साल 2022 के लिए नए फ़ीचर

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

लेयर कैस्केड करें

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

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

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

Chrome Devtools के स्टाइल साइडबार का स्क्रीनशॉट. इसमें नए लेयर ग्रुप में स्टाइल के दिखने का तरीका हाइलाइट किया गया है.

संसाधन

सबग्रिड

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

सीएसएस की तय की गई लाइनें दिखाने के लिए, Chrome Devtools के ग्रिड ओवरले टूल का इस्तेमाल करते हुए, सबग्रिड डेमो का स्क्रीनशॉट.

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

Chrome DevTools के एलिमेंट पैनल का स्क्रीनशॉट, जिसमें उन एलिमेंट को लेबल किया गया है जिनमें ग्रिड या सबग्रिड लेआउट हैं. — Firefox Devtools से लिया गया स्क्रीनशॉट

संसाधन

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

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

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

Una Kravets के बनाए डेमो

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

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

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

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

Max Böck का डेमो

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

संसाधन

`accent-color`

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

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

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

तुलना के लिए, हल्के और गहरे रंग वाले एचटीएमएल एलिमेंट, अगल-बगल रखे गए हैं.

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

संसाधन

कलर लेवल 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()`

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

संसाधन

कलर स्पेस

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

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-contrast()`

ब्राउज़र सहायता

सोर्स

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

तीन मटीरियल पैलेट का स्क्रीनशॉट, जिसमें 14 रंग और टेक्स्ट के लिए उनके सही सफ़ेद या काले रंग के कंट्रास्ट दिखाए गए हैं. — 2014 के मटीरियल डिज़ाइन के रंग पटल का उदाहरण

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 */
);

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

संसाधन

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

ब्राउज़र सहायता

सोर्स

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

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

नीचे दिए गए सिंटैक्स के उदाहरण में, एक बेस हेक्स दिया गया है और उससे जुड़े दो नए रंग बनाए गए हैं. पहला रंग --absolute-change, बेस कलर से LCH में एक नया रंग बनाता है. इसके बाद, बेस कलर के लाइटनेस को 75% से बदलता है. हालांकि, इस दौरान क्रोमा (c) और ह्यू (h) में कोई बदलाव नहीं होता. दूसरा रंग --relative-change, बेस कलर से LCH में एक नया रंग बनाता है. हालांकि, इस बार क्रोमा (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() का इस्तेमाल किया है कि लेबल का कंट्रास्ट सही हो:

तीन कॉलम वाला स्क्रीनशॉट, जिसमें हर कॉलम, बीच वाले कॉलम से गहरे या हल्के रंग का है. — डेमो आज़माएं

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

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

सीएसएस की मदद से डाइनैमिक तौर पर जनरेट किए गए 15 पैलेट का स्क्रीनशॉट. — डेमो आज़माएं

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

संसाधन

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

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

ग्रिड में चार ग्रेडिएंट, सभी सियान से लेकर डीप पिंक तक. LCH और LAB में एक जैसा माहौल होता है. इसमें sRGB, बीच में थोड़ा फीका हो जाता है.

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

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

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

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

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

ब्लैक से व्हाइट की तुलना करने वाले 11 कलर स्पेस दिखाए गए हैं.

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

ध्यान दें: okLCH और okLAB विशेष रूप से ऐसे कलर स्पेस हैं जिनमें अलग-अलग ड्रिफ़्ट होते हैं. जैसे, यह बैंगनी रंग का है, जो ग्रेडिएंट के लिए खास तौर पर सटीक होते हैं.

नीले से काले रंग की तुलना करने वाले 11 कलर स्पेस.

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

संसाधन

`inert`

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

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

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

संसाधन

COLRv1 फ़ॉन्ट

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

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

तुलना विज़ुअलाइज़ेशन और बार चार्ट, जो दिखाता है कि COLRv1 फ़ॉन्ट ज़्यादा साफ़ और छोटे कैसे होते हैं. — इमेज https://developer.chrome.com/blog/colrv1-fonts/ से ली गई है

यहां इमोजी के बारे में 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;
}

DUNE शब्द के साथ बंजी स्पाइस फ़ॉन्ट का स्क्रीनशॉट. — Bungee Spice फ़ॉन्ट को पसंद के मुताबिक रंगों में दिखाया गया है. इसका सोर्स https://developer.chrome.com/blog/colrv1-fonts/ है

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

संसाधन

व्यूपोर्ट की इकाइयां

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

नए व्यूपोर्ट वैरिएंट से पहले, वेब पर फ़िज़िकल यूनिट उपलब्ध थीं, ताकि व्यूपोर्ट को फ़िट करने में मदद मिल सके. इसमें ऊंचाई, चौड़ाई, सबसे छोटा साइज़ (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;
}

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

संसाधन

`: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) {...}

ध्यान दें: :focus-within पहले से ही section:has(*:focus-visible) की तरह काम करता है. इसलिए, इसका इस्तेमाल करना चाहिए.

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

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

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

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

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

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

@supports (selector(:has(works))) {
  /* safe to use :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 यहां मददगार होती है, क्योंकि टाइप की गई सीएसएस प्रॉपर्टी, ब्राउज़र को बहुत जटिल इंटरपोलेशन में डेवलपर के इंटेंट के बारे में बता सकती है. इससे ब्राउज़र, किसी स्टाइल के उन हिस्सों को ऐनिमेट कर सकता है जिन्हें पहले ऐनिमेट नहीं किया जा सकता था.

इस डेमो उदाहरण पर ध्यान दें. इसमें रेडियल ग्रेडिएंट का इस्तेमाल करके, ओवरले का एक हिस्सा बनाया गया है. इससे स्पॉटलाइट फ़ोकस इफ़ेक्ट बनता है. alt/opt बटन को दबाने पर JavaScript, माउस 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 के साथ बहुत कुछ किया जा सकता है, लेकिन इस छोटे-छोटे प्रोग्राम से काफ़ी मदद मिल सकती है.

संसाधन

`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) {
  …
}

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

संसाधन

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

@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 में इस्तेमाल करता/करती हूं.

संसाधन

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

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

संसाधन

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

नीचे दिए गए उदाहरण में, 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;
  }
}

संसाधन

सीएसएस में, मज़ार जैसा लेआउट बनाने का कोई तरीका नहीं है

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

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

मज़दूरों की लाइन दिखाने वाले लेआउट का स्क्रीनशॉट, जिसमें नंबर सबसे ऊपर से नीचे की ओर जाते हुए दिख रहे हैं. — Smashing Magazine से ली गई इमेज और डेमो
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

पिछला डेमो, नीचे दी गई सीएसएस का इस्तेमाल करके पूरा किया जाता है:

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

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

संसाधन

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

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

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

टीवी शो के कैरसेल इंटरफ़ेस का स्क्रीनशॉट, जिसमें कई थंबनेल और टाइटल दिखाए गए हैं.

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

टीवी शो के कैरसेल इंटरफ़ेस का स्क्रीनशॉट, जिसमें कोई थंबनेल और कई टाइटल नहीं दिख रहे हैं.

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

संसाधन

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

स्क्रोल स्नैप के इन प्रस्तावों से पहले, कैरसेल, स्लाइडर या गैलरी को मैनेज करने के लिए, अपना 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;
}

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

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

संसाधन

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

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

संसाधन

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

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

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

संसाधन

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

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

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

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

संसाधन

anchor() explainer

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

खास जानकारी

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

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

Compat 2021

Interop 2022

साल 2022 के लिए नए फ़ीचर

लेयर कैस्केड करें

संसाधन

सबग्रिड

संसाधन

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

संसाधन

accent-color

संसाधन

कलर लेवल 4 और 5

hwb()

संसाधन

कलर स्पेस

color-mix()

संसाधन

color-contrast()

संसाधन

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

संसाधन

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

संसाधन

inert

संसाधन

COLRv1 फ़ॉन्ट

संसाधन

व्यूपोर्ट की इकाइयां

संसाधन

:has()

संसाधन

2022 और उसके बाद

पूरी तरह टाइप नहीं की गई कस्टम प्रॉपर्टी

ऐनिमेशन

संसाधन

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

संसाधन

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

संसाधन

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

संसाधन

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

संसाधन

सीएसएस में, मज़ार जैसा लेआउट बनाने का कोई तरीका नहीं है

संसाधन

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

संसाधन

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

नए एपीआई

snapChanging()

snapChanged()

scroll-start

:snap-target

संसाधन

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

संसाधन

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

संसाधन

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

संसाधन

`accent-color`

`hwb()`

`color-mix()`

`color-contrast()`

`inert`

`:has()`

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

`snapChanging()`

`snapChanged()`

`scroll-start`

`:snap-target`