सीएसएस पॉडकास्ट - 004: The Cascade
सीएसएस का मतलब है कैस्केडिंग स्टाइलशीट. कैस्केड एक ऐसा एल्गोरिदम है जिसमें किसी एचटीएमएल एलिमेंट पर सीएसएस के कई नियम लागू होते हैं. इन विवादों को हल करने के लिए, कैस्केड का इस्तेमाल किया जाता है. इसी वजह से, यहां दिए गए सीएसएस के साथ स्टाइल किए गए बटन का टेक्स्ट नीला होगा.
button {
color: red;
}
button {
color: blue;
}
कैस्केड एल्गोरिदम को समझने से आपको यह समझने में मदद मिलती है कि ब्राउज़र इस तरह के विवादों को कैसे सुलझाता है. कैस्केड एल्गोरिदम को चार अलग-अलग चरणों में बांटा गया है.
- दिखने की जगह और क्रम: आपके सीएसएस के नियम किस क्रम में दिखते हैं
- खासियत: एक एल्गोरिदम, जो यह तय करता है कि किस सीएसएस सिलेक्टर का सबसे बेहतर मैच है
- ऑरिजिन: सीएसएस दिखने का क्रम और वह कहां से आता है, चाहे वह ब्राउज़र स्टाइल हो, ब्राउज़र एक्सटेंशन का सीएसएस हो या आपकी बनाई गई सीएसएस हो
- अहम जानकारी: सीएसएस के कुछ नियमों पर दूसरों की तुलना में ज़्यादा अहमियत दी जाती है.
खास तौर पर,
!important
नियम के नियमों के मामले में
दिखने का क्रम और पोज़िशन
विवाद के समाधान का हिसाब लगाते समय, इस बात को ध्यान में रखा जाता है कि आपकी सीएसएस के नियम किस क्रम में दिखेंगे और किस तरह दिखेंगे.
इस लेसन की शुरुआत में दिखाया गया डेमो, पोज़िशन के बारे में सबसे आसान उदाहरण है. दो नियम ऐसे होते हैं जिनमें एक जैसी विशेषता वाले सिलेक्टर होते हैं, इसलिए वह आखिरी नियम जिसे जीता गया है.
एचटीएमएल पेज पर मौजूद अलग-अलग सोर्स से स्टाइल आ सकती हैं. जैसे, <link>
टैग, एम्बेड किया गया <style>
टैग, और एलिमेंट के style
एट्रिब्यूट में बताए गए इनलाइन सीएसएस.
अगर आपके पास एक ऐसा <link>
है जिसमें आपके एचटीएमएल पेज के सबसे ऊपर सीएसएस शामिल है, तो एक दूसरा <link>
जिसमें आपके पेज के नीचे सीएसएस शामिल है: सबसे नीचे <link>
में सबसे खास जानकारी होगी.
यही बात एम्बेड किए गए <style>
एलिमेंट के साथ भी होती है.
वे जितने ज़्यादा सटीक होते हैं, उतने ही ज़्यादा सटीक होते जाते हैं.
यह क्रम एम्बेड किए गए <style>
एलिमेंट पर भी लागू होता है.
अगर उनका एलान <link>
से पहले किया जाता है,
तो लिंक की गई स्टाइलशीट के सीएसएस में सबसे ज़्यादा खास जानकारी होगी.
जब तक डिक्लेरेशन में !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
जैसी सिलेक्टर की सूची वाले किसी एलिमेंट को टारगेट किया जाता है, तो
आपको अन्य सीएसएस के साथ ओवरराइट करना काफ़ी मुश्किल होता है.
इस वजह से और अपनी सीएसएस को फिर से इस्तेमाल करने लायक बनाने के लिए, बेहतर होगा कि आप सिलेक्टर को जितना हो सके उतना आसान रखें.
ज़रूरत के समय एलिमेंट की पहचान करने के लिए, एक टूल के तौर पर विशिष्टता का इस्तेमाल करें. अगर हो सके, तो हमेशा लंबी और खास सिलेक्टर सूचियों को फिर से बनाने के बारे में सोचें.
शुरुआत की जगह
आपने जो सीएसएस लिखा है, वह किसी पेज पर लागू किया गया इकलौता सीएसएस नहीं है. कैस्केड में सीएसएस की शुरुआत का ध्यान रखा जाता है. इस ऑरिजिन में, ब्राउज़र की इंटरनल स्टाइलशीट, ब्राउज़र एक्सटेंशन या ऑपरेटिंग सिस्टम से जोड़ी गई स्टाइल, और आपका बनाया गया सीएसएस शामिल होता है. इन ऑरिजिन की खासियत का क्रम, कम से कम सटीक से लेकर सबसे खास तक इस तरह है:
- उपयोगकर्ता एजेंट के बेस स्टाइल. आपका ब्राउज़र, एचटीएमएल एलिमेंट पर डिफ़ॉल्ट रूप से ये स्टाइल लागू करता है.
- स्थानीय उपयोगकर्ता की स्टाइल. ये ऑपरेटिंग सिस्टम के लेवल से आ सकते हैं, जैसे कि बेस फ़ॉन्ट साइज़ या कम मोशन की प्राथमिकता. ये ब्राउज़र एक्सटेंशन जैसे कि ब्राउज़र एक्सटेंशन से भी आ सकते हैं, जिससे उपयोगकर्ता किसी वेबपेज के लिए अपनी पसंद के मुताबिक सीएसएस लिख सकता है.
- लिखा हुआ सीएसएस. वह सीएसएस जिसे आपने लिखा है.
!important
लिखा गया. आपके लिखे गए एलानों में जोड़ा जाने वाला कोई भी!important
.- स्थानीय उपयोगकर्ता की स्टाइल
!important
. ऑपरेटिंग सिस्टम लेवल या ब्राउज़र एक्सटेंशन लेवल के सीएसएस से आने वाला कोई भी!important
. - उपयोगकर्ता एजेंट
!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
क्या है?
!important
उपयोगकर्ता की कस्टम स्टाइल, सबसे सटीक ऑरिजिन का इस्तेमाल करती है.अहमियत
सीएसएस के सभी नियमों की गिनती एक-दूसरे से और एक जैसी नहीं की जाती.
ज़रूरी क्रम, सबसे कम ज़रूरी से लेकर सबसे ज़रूरी तक की जानकारी इस तरह दी गई है:
- सामान्य नियम टाइप, जैसे कि
font-size
,background
याcolor
animation
नियम का टाइप!important
नियम का टाइप (ऑरिजिन के क्रम के हिसाब से)transition
नियम का टाइप
ऐक्टिव ऐनिमेशन और ट्रांज़िशन के नियम के टाइप, सामान्य नियमों से ज़्यादा अहम होते हैं.
ट्रांज़िशन के मामले में, !important
नियम के टाइप की तुलना में यह ज़्यादा अहम है.
ऐसा इसलिए होता है, क्योंकि जब कोई ऐनिमेशन या ट्रांज़िशन चालू होता है, तब विज़ुअल स्थिति में बदलाव होना चाहिए.
DevTools का इस्तेमाल करके, यह पता लगाना कि कुछ सीएसएस क्यों लागू नहीं हो रही हैं
ब्राउज़र DevTools आम तौर पर ऐसे सभी सीएसएस दिखाएगा जो किसी एलिमेंट से मेल खा सकते हैं. ऐसा उन सीएसएस के साथ होगा जिनका इस्तेमाल नहीं किया जा रहा है.
अगर आप जिस सीएसएस को लागू करने की उम्मीद कर रहे हैं वह ना दिखे, तो वह एलिमेंट से मेल नहीं खा रहा है. ऐसे मामले में आपको कहीं और खोजना होगा, शायद किसी क्लास या एलिमेंट के नाम में टाइपिंग की गलती हो या किसी अमान्य सीएसएस का.
आपने जो सीखा है उसकी जांच करें
झरने के बारे में अपनी जानकारी परखें
कैस्केड का उपयोग इसके लिए किया जा सकता है...