झरना

सीएसएस पॉडकास्ट - 004: The Cascade

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

button {
  color: red;
}

button {
  color: blue;
}

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

  1. दिखने की जगह और क्रम: आपके सीएसएस के नियम किस क्रम में दिखते हैं
  2. खासियत: एक एल्गोरिदम, जो यह तय करता है कि किस सीएसएस सिलेक्टर का सबसे बेहतर मैच है
  3. ऑरिजिन: सीएसएस दिखने का क्रम और वह कहां से आता है, चाहे वह ब्राउज़र स्टाइल हो, ब्राउज़र एक्सटेंशन का सीएसएस हो या आपकी बनाई गई सीएसएस हो
  4. अहम जानकारी: सीएसएस के कुछ नियमों पर दूसरों की तुलना में ज़्यादा अहमियत दी जाती है. खास तौर पर, !important नियम के नियमों के मामले में

दिखने का क्रम और पोज़िशन

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

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

एचटीएमएल पेज पर मौजूद अलग-अलग सोर्स से स्टाइल आ सकती हैं. जैसे, <link> टैग, एम्बेड किया गया <style> टैग, और एलिमेंट के style एट्रिब्यूट में बताए गए इनलाइन सीएसएस.

अगर आपके पास एक ऐसा <link> है जिसमें आपके एचटीएमएल पेज के सबसे ऊपर सीएसएस शामिल है, तो एक दूसरा <link> जिसमें आपके पेज के नीचे सीएसएस शामिल है: सबसे नीचे <link> में सबसे खास जानकारी होगी. यही बात एम्बेड किए गए <style> एलिमेंट के साथ भी होती है. वे जितने ज़्यादा सटीक होते हैं, उतने ही ज़्यादा सटीक होते जाते हैं.

सीएसएस के बताए गए तरीके के मुताबिक, बटन का बैकग्राउंड नीले रंग का होता है और इसे <link /> एलिमेंट में शामिल किया जाता है. सीएसएस का जो नियम उसे गहरे रंग पर सेट करता है वह लिंक की गई दूसरी स्टाइलशीट में होता है. इसे बाद में लागू होने की वजह से लागू किया जाता है.

यह क्रम एम्बेड किए गए <style> एलिमेंट पर भी लागू होता है. अगर उनका एलान <link> से पहले किया जाता है, तो लिंक की गई स्टाइलशीट के सीएसएस में सबसे ज़्यादा खास जानकारी होगी.

<style> एलिमेंट का एलान <head> में किया जाता है, जबकि <link /> एलिमेंट का एलान <body> में किया जाता है. इसका मतलब है कि यह <style> एलिमेंट के मुकाबले ज़्यादा सटीक होता है

जब तक डिक्लेरेशन में !important तय न किया गया हो, तब तक इनलाइन style एट्रिब्यूट की वैल्यू में, सीएसएस के बारे में दी गई जानकारी, दूसरे सभी सीएसएस को बदल देगी. भले ही, उसकी पोज़िशन कुछ भी हो.

रैंक, आपके सीएसएस नियम के क्रम में भी लागू होती है. इस उदाहरण में, एलिमेंट का बैकग्राउंड बैंगनी होगा, क्योंकि background: purple को आखिरी बार एलान किया गया था. बैंगनी बैकग्राउंड से पहले हरा बैकग्राउंड बताया गया था, इसलिए ब्राउज़र अब इसे अनदेखा कर देता है.

.my-element {
  background: green;
  background: purple;
}

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

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

आपने जो सीखा है उसकी जांच करें

झरने के बारे में अपनी जानकारी परखें

अगर आपके पेज पर यह एचटीएमएल कोड मौजूद है:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

styles.css के अंदर, यह सीएसएस नियम है:

button {
  background: yellow;
}

बटन के बैकग्राउंड का रंग क्या है?

गुलाबी
एम्बेड किया गया <style> ऑरिजिन, पेज से <link> टैग से और नीचे है. इसलिए, button की खासियत पहले जैसी ही है, लेकिन स्टाइल के नियम की रैंक एक जैसी है.
पीला
एचटीएमएल दस्तावेज़ के लिए, हो सकता है कि पीले बटन वाले बैकग्राउंड को सबसे पहले पढ़ा गया हो, लेकिन बाद में इसी खासियत का एक नया नियम पता चला, जिससे यह नियम बटन पर लागू नहीं हुआ.

खासियत

विशेषता एक एल्गोरिदम है जो तय करता है कि कौनसा सीएसएस सिलेक्टर सबसे सटीक है. इसके लिए, महत्व या स्कोरिंग सिस्टम का इस्तेमाल करके कैलकुलेशन किए जाते हैं. किसी नियम को ज़्यादा सटीक बनाकर, उसे लागू किया जा सकता है. भले ही, सिलेक्टर से मेल खाने वाला कोई दूसरा सीएसएस, बाद में सीएसएस में दिखे.

अगले लेसन में यह जाना जा सकता है कि किसी खास विषय की वैल्यू का हिसाब कैसे लगाया जाता है. हालांकि, कुछ चीज़ों का ध्यान रखने से, उससे जुड़ी कई समस्याओं से बचा जा सकता है.

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

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

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

खासियत, कुल वैल्यू होती है

जैसा कि अगले लेख में बताया गया है, हर तरह के सिलेक्टर को पॉइंट दिए जाते हैं. इससे पता चलता है कि वह कितना सटीक है. इसलिए, किसी एलिमेंट को टारगेट करने के लिए इस्तेमाल किए गए सभी सिलेक्टर के लिए पॉइंट एक साथ जोड़ दिए गए हैं. इसका मतलब है कि अगर a.my-class.another-class[href]:hover जैसी सिलेक्टर की सूची वाले किसी एलिमेंट को टारगेट किया जाता है, तो आपको अन्य सीएसएस के साथ ओवरराइट करना काफ़ी मुश्किल होता है. इस वजह से और अपनी सीएसएस को फिर से इस्तेमाल करने लायक बनाने के लिए, बेहतर होगा कि आप सिलेक्टर को जितना हो सके उतना आसान रखें. ज़रूरत के समय एलिमेंट की पहचान करने के लिए, एक टूल के तौर पर विशिष्टता का इस्तेमाल करें. अगर हो सके, तो हमेशा लंबी और खास सिलेक्टर सूचियों को फिर से बनाने के बारे में सोचें.

शुरुआत की जगह

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

  1. उपयोगकर्ता एजेंट के बेस स्टाइल. आपका ब्राउज़र, एचटीएमएल एलिमेंट पर डिफ़ॉल्ट रूप से ये स्टाइल लागू करता है.
  2. स्थानीय उपयोगकर्ता की स्टाइल. ये ऑपरेटिंग सिस्टम के लेवल से आ सकते हैं, जैसे कि बेस फ़ॉन्ट साइज़ या कम मोशन की प्राथमिकता. ये ब्राउज़र एक्सटेंशन जैसे कि ब्राउज़र एक्सटेंशन से भी आ सकते हैं, जिससे उपयोगकर्ता किसी वेबपेज के लिए अपनी पसंद के मुताबिक सीएसएस लिख सकता है.
  3. लिखा हुआ सीएसएस. वह सीएसएस जिसे आपने लिखा है.
  4. !important लिखा गया. आपके लिखे गए एलानों में जोड़ा जाने वाला कोई भी !important.
  5. स्थानीय उपयोगकर्ता की स्टाइल !important. ऑपरेटिंग सिस्टम लेवल या ब्राउज़र एक्सटेंशन लेवल के सीएसएस से आने वाला कोई भी !important.
  6. उपयोगकर्ता एजेंट !important. ब्राउज़र से मिलने वाले डिफ़ॉल्ट सीएसएस में तय किया गया कोई भी !important.
ऑरिजिन के क्रम को विज़ुअल तौर पर दिखाना, जैसा कि सूची में भी बताया गया है.

अगर आपकी ओर से बनाई गई सीएसएस में !important नियम का प्रकार मौजूद है और उपयोगकर्ता के कस्टम सीएसएस में !important नियम का प्रकार है, जिसका सीएसएस जीतता है?

आपने जो सीखा है उसकी जांच करें

झरने की उत्पत्ति के बारे में अपनी जानकारी परखें

कैस्केड ऑरिजिन के बारे में अपनी जानकारी को जांचें. साथ ही, अलग-अलग ऑरिजिन से जुड़े इन स्टाइल के नियमों पर गौर करें:

उपयोगकर्ता-एजेंट स्टाइल

h1 { margin-block-start: 0.83em; }

बूटस्ट्रैप

h1 { margin-block-start: 20px; }

पेज की लेखक स्टाइल

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

उपयोगकर्ता की पसंद के मुताबिक स्टाइल

h1 { margin-block-start: 2rem !important; }

फिर, नीचे दिया गया एचटीएमएल दिया जाता है:

<h1>Lorem ipsum</h1>

h1 का फ़ाइनल margin-block-start क्या है?

20px
बूटस्ट्रैप लिखे गए ऑरिजिन का हिस्सा है, इसलिए यह ज़रूरी लोकल यूज़र स्टाइल का इस्तेमाल नहीं कर पाता.
0.83em
उपयोगकर्ता एजेंट स्टाइल ऑरिजिन, ज़रूरी लोकल उपयोगकर्ता स्टाइल को ऐक्सेस नहीं कर पाता.
2 मिनट
!important उपयोगकर्ता की कस्टम स्टाइल, सबसे सटीक ऑरिजिन का इस्तेमाल करती है.
2 वर्ण
लेखक की यह स्टाइल, लिखे गए ऑरिजिन का हिस्सा है, इसलिए लोकल यूज़र स्टाइल का यह असर हट जाता है.
1 घंटा
लेखक की यह स्टाइल, लिखे गए ऑरिजिन का हिस्सा है, इसलिए लोकल यूज़र स्टाइल का यह असर हट जाता है.

अहमियत

सीएसएस के सभी नियमों की गिनती एक-दूसरे से और एक जैसी नहीं की जाती.

ज़रूरी क्रम, सबसे कम ज़रूरी से लेकर सबसे ज़रूरी तक की जानकारी इस तरह दी गई है:

  1. सामान्य नियम टाइप, जैसे कि font-size, background या color
  2. animation नियम का टाइप
  3. !important नियम का टाइप (ऑरिजिन के क्रम के हिसाब से)
  4. transition नियम का टाइप

ऐक्टिव ऐनिमेशन और ट्रांज़िशन के नियम के टाइप, सामान्य नियमों से ज़्यादा अहम होते हैं. ट्रांज़िशन के मामले में, !important नियम के टाइप की तुलना में यह ज़्यादा अहम है. ऐसा इसलिए होता है, क्योंकि जब कोई ऐनिमेशन या ट्रांज़िशन चालू होता है, तब विज़ुअल स्थिति में बदलाव होना चाहिए.

DevTools का इस्तेमाल करके, यह पता लगाना कि कुछ सीएसएस क्यों लागू नहीं हो रही हैं

ब्राउज़र DevTools आम तौर पर ऐसे सभी सीएसएस दिखाएगा जो किसी एलिमेंट से मेल खा सकते हैं. ऐसा उन सीएसएस के साथ होगा जिनका इस्तेमाल नहीं किया जा रहा है.

ब्राउज़र DevTools की इमेज, जिसमें सीएसएस को ओवरराइट किया गया है

अगर आप जिस सीएसएस को लागू करने की उम्मीद कर रहे हैं वह ना दिखे, तो वह एलिमेंट से मेल नहीं खा रहा है. ऐसे मामले में आपको कहीं और खोजना होगा, शायद किसी क्लास या एलिमेंट के नाम में टाइपिंग की गलती हो या किसी अमान्य सीएसएस का.

आपने जो सीखा है उसकी जांच करें

झरने के बारे में अपनी जानकारी परखें

कैस्केड का उपयोग इसके लिए किया जा सकता है...

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

रिसॉर्स