झरना

द सीएसएस पॉडकास्ट - 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> एलिमेंट की तुलना में ज़्यादा खास है

अगर इनलाइन style एट्रिब्यूट में सीएसएस का एलान किया गया है, तो वह दूसरे सभी सीएसएस को बदल देगा, चाहे किसी भी स्थिति में हो, जब तक कि किसी एलान में !important के बारे में न बताया गया हो.

स्थान आपके CSS नियम के क्रम में भी लागू होता है. इस उदाहरण में, एलिमेंट का बैकग्राउंड बैंगनी रंग का होगा, क्योंकि आखिरी बार 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 क्या है?

20 पिक्सल
बूटस्ट्रैप उस ऑरिजिन का हिस्सा है जिसे मूल तौर पर उपयोगकर्ता ने लिखा है. इसमें, उपयोगकर्ता की अहम लोकल स्टाइल का इस्तेमाल नहीं किया जाता.
0.83em
उपयोगकर्ता एजेंट स्टाइल ऑरिजिन, अहम लोकल उपयोगकर्ता स्टाइल की जगह ले लेता है.
2आरईएम
!important उपयोगकर्ता की पसंद के मुताबिक बनाई गई इस शैली का ऑरिजिन सबसे खास है.
2एच
लेखक की यह शैली, मूल तौर पर लिखे गए ऑरिजिन का हिस्सा है. इसका स्थानीय उपयोगकर्ता स्टाइल खो जाता है.
1च
लेखक की यह शैली, मूल तौर पर लिखे गए ऑरिजिन का हिस्सा है. इसका स्थानीय उपयोगकर्ता स्टाइल खो जाता है.

अहमियत

सीएसएस के सभी नियमों को एक-दूसरे की तरह कैलकुलेट नहीं किया जाता, या एक-दूसरे की जैसी विशेषता दी गई हो.

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

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

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

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

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

ब्राउज़र DevTools की इमेज, जिसमें बदले गए सीएसएस को क्रॉस किया गया है

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

देखें कि आपको कितना समझ आया है

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

Cascade का इस्तेमाल इन चीज़ों के लिए किया जा सकता है...

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

संसाधन