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

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

Adam Argyle

साल 2022, सीएसएस के सबसे अच्छे सालों में से एक है. इसे कई सुविधाओं और को-ऑपरेटिव ब्राउज़र सुविधा रिलीज़ के मामले में बनाया गया है. इसका लक्ष्य, साथ मिलकर 14 सुविधाएं लागू करना था!

खास जानकारी

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

विषय सूची

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

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

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

Compat 2021

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

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

टेस्ट के स्कोर, पूरे बोर्ड में बढ़ाए गए थे, जिससे अपग्रेड की गई स्थिरता और विश्वसनीयता का पता चलता है. सभी टीमों को बधाई!

इंटरऑप 2022

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

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

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

साल 2022 में मिले अपडेट

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

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

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

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

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

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

रिसॉर्स

• सीएसएस कैस्केड 5 का स्पेसिफ़िकेशन
• कैस्केड लेयर के बारे में जानकारी देने वाला टूल
• एमडीएन पर लेयर कैस्केड करें
• ऊना क्रावेट्स: कैस्केड लेयर
• अहमद शेदीद: नमस्ते, सीएसएस कैस्केड लेयर

सबग्रिड

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

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

रिसॉर्स

• सबग्रिड की जानकारी
• एमडीएन पर सबग्रिड करें
• Bramus: प्रैक्टिकल सीएसएस सबग्रिड वीडियो ट्यूटोरियल

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

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

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

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

रिसॉर्स

• कंटेनर क्वेरी की खास बातें
• कंटेनर क्वेरी के बारे में जानकारी
• एमडीएन पर कंटेनर क्वेरी
• web.dev पर नया रिस्पॉन्सिव वर्शन
• Una का कैलेंडर डेमो
• कंटेनर की क्वेरी का शानदार कलेक्शन
• web.dev पर हमने Designcember कैसे बनाया
• Ahmad Shadeed: सीएसएस को नमस्ते कहें कंटेनर क्वेरी

accent-color

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

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

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

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

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

रिसॉर्स

• उच्चारण के रंग से जुड़ी खास बातें
• एमडीएन पर एक्सेंट-रंग
• web.dev पर accent-color
• Bramus: कंपैरिज़न शॉपिंग सर्विस (सीएसएस) के साथ टिंट यूज़र-इंटरफ़ेस कंट्रोल

कलर लेवल 4 और 5

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

साल 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()

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

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

रिसॉर्स

• HWB की खास बातें
• एमडीएन पर HWB
• स्टीफ़न जूडिस: hwb() – इंसानों के लिए एक कलर नोटेशन?

कलर स्पेस

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

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

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

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

.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() की खास जानकारी
• एमडीएन पर color-mix()
• थीम का डेमो
• थीम वाली थीम का एक और डेमो
• फ़ैबियो जियोलिटो: इन आने वाली सीएसएस सुविधाओं की मदद से, कलर थीम बनाएं

color-contrast()

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

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

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

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

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-CONrast() की खास बातें
• MDN पर color-conrast()
• डेमोग्राफ़िक जानकारी

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

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

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

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

रिसॉर्स

• मिलते-जुलते कलर सिंटैक्स की खास जानकारी
• अलग-अलग रंग के सिंटैक्स के साथ रंग पटल बनाना
• रिलेटिव कलर सिंटैक्स का इस्तेमाल करके कलर वैरिएंट बनाना

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

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

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

रिसॉर्स

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

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

रिसॉर्स

• इंटरैक्ट की जानकारी
• एमडीएन पर इनर्ट करें
• Chrome डेवलपर: पेश है इनर्ट

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 डेवलपर: Colrv1 फ़ॉन्ट
• BlinkOn डेवलपर के बारे में जानकारी देने वाला वीडियो

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

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

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

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

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

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

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

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

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

रिसॉर्स

• :has() की खास जानकारी
• एमडीएन पर: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 पर वापस आ जाता है.

Animation

टाइप सुरक्षा के अलावा, यह ऐनिमेशन के कई दरवाज़े भी खोल देता है. सीएसएस सिंटैक्स के सुविधाजनक होने की वजह से, कुछ चीज़ों को ऐनिमेट करना नामुमकिन हो जाता है, जैसे कि ग्रेडिएंट. यहां @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
• web.dev पर@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) {
  …
}

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

रिसॉर्स

• मीडिया क्वेरी रेंज सिंटैक्स की खास जानकारी
• MDN पर मीडिया क्वेरी रेंज सिंटैक्स
• मीडिया क्वेरी रेंज सिंटैक्स पोस्टसीएसएस प्लगिन

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

@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 {
    …
  }
}

कस्टम मीडिया क्वेरी की पूरी सूची देखें, जिसका इस्तेमाल मैं अपनी सीएसएस कस्टम प्रॉपर्टी लाइब्रेरी ओपन प्रॉप्स में करता हूं.

रिसॉर्स

• कस्टम मीडिया क्वेरी की खास जानकारी
• कस्टम मीडिया क्वेरी पोस्टसीएसएस प्लगिन

नेस्ट करने वाले सिलेक्टर बहुत बढ़िया हैं

@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 की खास बातें
• @nest PostCSS प्लगिन
• Bramus: सीएसएस का भविष्य: Nesting Selectors

स्कोपिंग स्टाइल काफ़ी मुश्किल है

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

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

नीचे दिए गए उदाहरण में, बीईएम नाम वाले कन्वेंशन के स्कोपिंग को असल इंटेंट में उलटा जा सकता है. बीईएम सिलेक्टर, 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 की खास बातें
• @scope के बारे में जानकारी

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

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

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

पिछला डेमो इस सीएसएस की मदद से पूरा किया जाता है:

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

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

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

रिसॉर्स

• स्क्रोल Snap 2 ड्राफ़्ट के बारे में खास जानकारी
• स्क्रोल Snap 2 की जानकारी
• स्नैप डेमो

ज्ञात राज्यों के बीच साइकल चलाई जा रही है

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: सीएसएस का भविष्य: सीएसएस 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;
}

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

रिसॉर्स

• मेन्यू की खास जानकारी चुनें
• Selectमेन्यू का डेमो

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

anchor() के पहले, रैंक के निरपेक्ष और रिलेटिव का इस्तेमाल करके डेवलपर के लिए, चाइल्ड एलिमेंट को पैरंट एलिमेंट में एक जगह से दूसरी जगह ले जाने की रणनीति अपनाई जाती थी.

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

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

रिसॉर्स

• ऐंकर() एक्सप्लेनर