आपके ब्राउज़र में कैस्केड लेयर आ रही हैं

कैस्केड लेयर (@layer सीएसएस नियम), Chromium 99, Firefox 97, और Safari 15.4 बीटा में उपलब्ध होगी. इनकी मदद से, सीएसएस फ़ाइलों पर बेहतर तरीके से कंट्रोल किया जा सकता है. इससे, स्टाइल की एक खास बात को लेकर कोई टकराव नहीं होता. यह खास तौर पर बड़े कोडबेस, डिज़ाइन सिस्टम, और ऐप्लिकेशन में तीसरे पक्ष की स्टाइल को मैनेज करते समय इस्तेमाल किया जाता है.

अपने सीएसएस की लेयर सही तरीके से रखने से, अनचाहे स्टाइल ओवरराइड नहीं होते हैं. साथ ही, बेहतर सीएसएस आर्किटेक्चर को बढ़ावा मिलता है.

सीएसएस की खासियत और कैस्केड

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

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

इस समस्या को हल करने के लिए लेयर कैस्केड करें. उन्होंने सीएसएस कैस्केड में एक नई लेयर पेश किया. लेयर वाली स्टाइल के साथ, लेयर की प्राथमिकता हमेशा चुनने वाले की खासियत को मात देती है.

उदाहरण के लिए, .post a.link सिलेक्टर की खासियत .card a से ज़्यादा है. अगर आप कार्ड के अंदर किसी लिंक को स्टाइल करने की कोशिश कर रहे हैं, तो पोस्ट में आपको दिखेगा कि ज़्यादा खास सिलेक्टर का इस्तेमाल किया जाएगा.

@layer का इस्तेमाल करके, आपको यह साफ़ तौर पर पता चल सकता है कि हर सीएसएस की स्टाइल, खास तौर पर कैसी है. साथ ही, यह पक्का करें कि आपके कार्ड के लिंक का स्टाइल, पोस्ट के लिंक की स्टाइल को बदल दे. भले ही, आपके सभी सीएसएस एक ही प्लेन में मौजूद हों. ऐसा कैस्केड की प्राथमिकता की वजह से होता है. लेयर वाली स्टाइल, नए कैस्केड "प्लेन" बनाती हैं.

@layer इस्तेमाल किया जा रहा है

इस उदाहरण में @layer का इस्तेमाल करके कैस्केड लेयर की ताकत को दिखाया गया है. यहां कई लिंक दिखाए गए हैं: कुछ लिंक में कोई अतिरिक्त क्लास का नाम लागू नहीं किया गया है, एक .link क्लास और दूसरा .pink क्लास वाला है. इसके बाद, सीएसएस तीन लेयर जोड़ता है: base, typography, और utilities:

@layer base {
  a {
    font-weight: 800;
    color: red; /* ignored */
  }

  .link {
    color: blue; /* ignored */
  }
}

@layer typography {
  a {
    color: green; /* styles *all* links */
  }
}

@layer utilities {
  .pink {
    color: hotpink;  /* styles *all* .pink's */
  }
}

आखिरकार, सभी लिंक हरे या गुलाबी रंग के होते हैं. ऐसा इसलिए है, क्योंकि .link में सिलेक्टर-लेवल की खासियत a से ज़्यादा है. हालांकि, a पर कलर स्टाइल, ज़्यादा प्राथमिकता @layer में होती है. जब हरे रंग का नियम, नीले रंग के नियम के बाद वाली किसी लेयर में होता है, तो a { color: green } .link { color: blue } को बदल देता है.

लेयर की प्राथमिकता, एलिमेंट की खासियत से ज़्यादा हो जाती है.

लेयर व्यवस्थित की जा रही हैं

जैसा कि ऊपर दिखाया गया है, आपके पास लेयर को सीधे पेज पर व्यवस्थित करने का विकल्प होता है. इसके अलावा, फ़ाइल के सबसे ऊपर भी उन्हें व्यवस्थित किया जा सकता है.

लेयर का क्रम, आपके कोड में हर लेयर का नाम पहली बार दिखने पर तय होता है.

इसका मतलब है कि अगर इन फ़ाइलों को फ़ाइल में सबसे ऊपर जोड़ा जाता है, तो सभी लिंक लाल रंग के दिखेंगे और .link क्लास वाला लिंक नीले रंग में दिखेगा:

@layer utilities, typography, base;

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

इंपोर्ट व्यवस्थित करना

@layer को इस्तेमाल करने का एक और तरीका है, फ़ाइलों को इंपोर्ट करना. नीचे दिए गए उदाहरण की तरह, layer() फ़ंक्शन का इस्तेमाल करके, स्टाइल इंपोर्ट करते समय ऐसा सीधे तौर पर किया जा सकता है.:

/* Base */
@import '../styles/base/normalize.css' layer(base); /* normalize or rest file */
@import '../styles/base/base.css' layer(base); /* body and base styles */
@import '../styles/base/theme.css' layer(theme); /* theme variables */
@import '../styles/base/typography.css' layer(theme); /* theme typography */
@import '../styles/base/utilities.css' layer(utilities); /* base utilities */

/* Layouts */
@import '../styles/components/post.css' layer(layouts); /* post layout */

/* Components */
@import '../styles/components/cards.css' layer(components); /* imports card */
@import '../styles/components/footer.css' layer(components); /* footer component */

ऊपर दिए गए कोड स्निपेट में तीन लेयर हैं: base,layouts, और components. base में सामान्य, थीम, और टाइपोग्राफ़ी वाली फ़ाइलें. साथ ही, layouts में post फ़ाइल और components में cards और footer. फ़ाइल इंपोर्ट करने पर, लेयर फ़ंक्शन का इस्तेमाल करके लेयर इंस्टैंशिएट की जाती हैं. एक वैकल्पिक तरीका यह है कि आप अपने लेयर को फ़ाइल के शीर्ष पर व्यवस्थित करें, और किसी भी इंपोर्ट से पहले उन्हें घोषित कर दें:

@layer base,
       theme,
       layouts,
       components,
       utilities;

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

लेयर और झरना

आइए, एक कदम पीछे जाएं और देखें कि चौड़े झरने से जुड़ी लेयर कहां इस्तेमाल की गई हैं:

प्राथमिकता का क्रम इस तरह होता है:

• उपयोगकर्ता एजेंट सामान्य (सबसे कम प्राथमिकता)
• स्थानीय उपयोगकर्ता @layer
• स्थानीय उपयोगकर्ता सामान्य
• लेखक @layers
• लेखक सामान्य
• लेखक !important
• लेखक @layer !important
• स्थानीय उपयोगकर्ता !important
• उपयोगकर्ता एजेंट !important** (सबसे ज़्यादा प्राथमिकता)

आपको यहां दिखेगा कि @layer !important स्टाइल उलटी गई हैं. बिना लेयर वाली (सामान्य) स्टाइल के मुकाबले, सामान्य स्टाइल के बजाय, इन्हें ज़्यादा प्राथमिकता दी जाती है. ऐसा इसलिए होता है, क्योंकि !important कैस्केड में काम करता है: यह आपकी स्टाइलशीट में सामान्य कैस्केडिंग को तोड़ देता है और लेयर-लेवल की सामान्य खासियत (वरीयता) को उलट देता है.

नेस्ट की गई लेयर

लेयर को अन्य लेयर के अंदर भी नेस्ट किया जा सकता है. यह उदाहरण मिरियम सुज़ान के कैस्केड लेयर्स एक्सप्लेनर से मिला है:

@layer default {
  p { max-width: 70ch; }
}

@layer framework {
  @layer default {
    p { margin-block: 0.75em; }
  }

  p { margin-bottom: 1em; }
}

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

@layer framework.default {
  p { margin-block: 0.75em }
}

इसके नतीजे के तौर पर बनने वाली लेयर और लेयर-ऑर्डर:

• डिफ़ॉल्ट
• framework.default
• framework लेयर हटाया गया
• लेयर न किया गया

ध्यान रखने योग्य बातें

अगर आप उन्हें ठीक तरह से इस्तेमाल करें, तो कैस्केड लेयर बढ़िया साबित हो सकती है, लेकिन वे अतिरिक्त भ्रम और अनचाहे नतीजे पैदा कर सकती हैं. कैस्केड लेयर के साथ काम करते समय, इन बातों पर ध्यान दें:

पहला नियम: रेंज के लिए @layer का इस्तेमाल न करें

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

a {
  …
}

इससे आपकी फ़ाइल के सभी a टैग पर, यह सेटिंग बदल जाएगी. यह भी ज़रूरी है कि आप अपनी स्टाइल को सही तरीके से दायरा रखें:

.card a {
  …
}

दूसरा नियम: कैस्कड लेयर को बिना लेयर वाले सीएसएस के पीछे क्रम से लगाया गया है

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

तीसरा नियम: !important, कैस्केड की खासियत को बदल देता है

आम तौर पर, लेयर वाली स्टाइल, बिना लेयर वाली स्टाइल के मुकाबले कम खास होती हैं. हालांकि, !important का इस्तेमाल करने से यह स्टाइल उलट दी जाती है. लेयर में, !important नियम वाले एलान, बिना लेयर वाली स्टाइल के मुकाबले ज़्यादा खास होते हैं.

ऐसे में, !important स्टाइल अपनी खासियत को बदल देती हैं. ऊपर दिया गया डायग्राम, रेफ़रंस के लिए यह दिखाता है: लेखक @layers की प्राथमिकता, लेखक की सामान्य से कम होती है जिसकी प्राथमिकता, लेखक !important से कम होती है जिसकी प्राथमिकता, लेखक @layer !important से कम होती है.

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

चौथा नियम: इंजेक्शन की ज़रूरी बातों को समझना

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

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

नियम #5: अपनी खासियत पर नज़र रखें

कैस्केड लेयर के साथ, कम खास सिलेक्टर (जैसे a), ज़्यादा खास सिलेक्टर (जैसे .link) को बदल देगा, अगर वह सिलेक्टर किसी खास लेयर पर है. नीचे दी गई चीज़ों पर विचार करें:

अगर: @layer utilities, components तय किया गया था, तो layer(components) में a, layer(utilities) में .pink को बदल देगा. यह एपीआई का इस्तेमाल जान-बूझकर किया गया हिस्सा है, लेकिन अगर आपको इसकी उम्मीद नहीं है, तो यह भ्रम की स्थिति पैदा कर सकता है और परेशान करने वाला हो सकता है.

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

कैस्केड लेयर के बारे में ज़्यादा जानें

कैस्केड लेयर के बारे में ज़्यादा जानने के लिए, इन संसाधनों को भी देखा जा सकता है:

• MDN @layer
• कैस्केड लेयर एक्सप्लेनर
• सीएसएस कैस्केडिंग और इनहेरिटेंस लेवल 5
• ब्रैमस की पेशकश, कैस्केड लेयर की जानकारी