सीएसएस पॉडकास्ट - 005: इनहेरिटेंस
मान लें कि आपने एलिमेंट को बटन जैसा दिखाने के लिए, कुछ सीएसएस लिखी है.
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
इसके बाद, कॉन्टेंट के किसी लेख में लिंक एलिमेंट जोड़ें. इसमें class की वैल्यू .my-button होनी चाहिए. हालांकि, एक समस्या है. टेक्स्ट का रंग, आपके हिसाब से नहीं है. ऐसा कैसे हुआ?
अगर आपने कुछ सीएसएस प्रॉपर्टी के लिए वैल्यू नहीं दी है, तो वे इनहेरिट हो जाती हैं.
इस बटन के मामले में, इस सीएसएस से color को इनहेरिट किया गया:
article a {
color: maroon;
}
इस लेसन में आपको पता चलेगा कि ऐसा क्यों होता है और कम सीएसएस लिखने में, इनहेरिटेंस की सुविधा कैसे मददगार होती है.
इनहेरिटेंस फ़्लो
आइए, एचटीएमएल के इस स्निपेट का इस्तेमाल करके, इनहेरिटेंस की सुविधा के काम करने का तरीका जानें:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
रूट एलिमेंट (<html>) को कुछ भी इनहेरिट नहीं किया जाएगा, क्योंकि यह दस्तावेज़ का पहला एलिमेंट है.
एचटीएमएल एलिमेंट में कुछ सीएसएस जोड़ें,
और यह दस्तावेज़ में कैस्केड होने लगती है.
html {
color: lightslategray;
}
color प्रॉपर्टी, डिफ़ॉल्ट रूप से अन्य एलिमेंट से इनहेरिट की जाती है.
html एलिमेंट में color: lightslategray है, इसलिए रंग इनहेरिट करने वाले सभी एलिमेंट का रंग अब lightslategray होगा.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
सिर्फ़ <p> में टेक्स्ट इटैलिक होगा, क्योंकि यह सबसे अंदर नेस्ट किया गया एलिमेंट है.
इनहेरिटेंस सिर्फ़ नीचे की ओर फ़्लो करता है, न कि पैरंट एलिमेंट पर वापस.
कौनसी प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट की जाती हैं?
सभी सीएसएस प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट नहीं होतीं, लेकिन कई प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट होती हैं. रेफ़रंस के लिए, यहां उन प्रॉपर्टी की पूरी सूची दी गई है जो डिफ़ॉल्ट रूप से इनहेरिट होती हैं. ये प्रॉपर्टी, सभी सीएसएस प्रॉपर्टी के W3 रेफ़रंस से ली गई हैं:
- azimuth
- border-collapse
- border-spacing
- caption-side
- color
- कर्सर
- direction
- empty-cells
- font-family
- font-size
- font-style
- font-variant
- font-weight
- font
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- अनाथ
- कोटेशन
- text-align
- text-indent
- text-transform
- विज़िबिलिटी
- white-space
- विधवाएं
- word-spacing
इनहेरिटेंस की सुविधा कैसे काम करती है
हर एचटीएमएल एलिमेंट में, हर सीएसएस प्रॉपर्टी डिफ़ॉल्ट रूप से शुरुआती वैल्यू के साथ तय होती है. शुरुआती वैल्यू एक ऐसी प्रॉपर्टी है जिसे इनहेरिट नहीं किया जाता. अगर कैस्केड उस एलिमेंट के लिए वैल्यू का हिसाब नहीं लगा पाता है, तो वह डिफ़ॉल्ट रूप से दिखती है.
इनहेरिट की जा सकने वाली प्रॉपर्टी, नीचे की ओर कैस्केड करती हैं. साथ ही, चाइल्ड एलिमेंट को एक कैलकुलेट की गई वैल्यू मिलेगी, जो उसकी पैरंट वैल्यू को दिखाती है.
इसका मतलब है कि अगर किसी पैरंट एलिमेंट के लिए font-weight को bold पर सेट किया गया है, तो सभी चाइल्ड एलिमेंट बोल्ड होंगे. ऐसा तब तक होगा, जब तक कि उनके font-weight को किसी दूसरी वैल्यू पर सेट नहीं किया जाता या उपयोगकर्ता एजेंट स्टाइलशीट में उस एलिमेंट के लिए font-weight की कोई वैल्यू मौजूद नहीं होती.
इनहेरिटेंस को साफ़ तौर पर इनहेरिट करने और कंट्रोल करने का तरीका
इनहेरिटेंस से एलिमेंट पर अनचाहे तरीके से असर पड़ सकता है. इसलिए, सीएसएस में ऐसे टूल मौजूद हैं जिनसे आपको इस समस्या को हल करने में मदद मिलती है.
inherit कीवर्ड
inherit कीवर्ड का इस्तेमाल करके, किसी भी प्रॉपर्टी को अपने पैरंट की कैलकुलेट की गई वैल्यू इनहेरिट कराई जा सकती है.
इस कीवर्ड का इस्तेमाल करने का एक अच्छा तरीका है, अपवाद बनाना.
strong {
font-weight: 900;
}
यह सीएसएस स्निपेट, सभी <strong> एलिमेंट के लिए डिफ़ॉल्ट bold वैल्यू के बजाय, 900 की font-weight वैल्यू सेट करता है. यह वैल्यू font-weight: 700 के बराबर होगी.
.my-component {
font-weight: 500;
}
.my-component क्लास, font-weight को 500 पर सेट करती है.
.my-component में मौजूद <strong> एलिमेंट को font-weight: 500 भी बनाने के लिए, यह जोड़ें:
.my-component strong {
font-weight: inherit;
}
अब, .my-component में मौजूद <strong> एलिमेंट में 500 का font-weight होगा.
इस वैल्यू को साफ़ तौर पर सेट किया जा सकता है. हालांकि, अगर inherit का इस्तेमाल किया जाता है और आने वाले समय में .my-component की सीएसएस में बदलाव होता है, तो यह गारंटी दी जा सकती है कि आपका <strong> अपने-आप अप-टू-डेट रहेगा.
initial कीवर्ड
इनहेरिटेंस की वजह से, आपके एलिमेंट में समस्याएं आ सकती हैं. initial में, रीसेट करने का एक बेहतर विकल्प उपलब्ध है.
आपने पहले सीखा था कि सीएसएस में हर प्रॉपर्टी की एक डिफ़ॉल्ट वैल्यू होती है.
initial कीवर्ड, प्रॉपर्टी को उसकी शुरुआती डिफ़ॉल्ट वैल्यू पर वापस सेट करता है.
aside strong {
font-weight: initial;
}
यह स्निपेट, <aside> एलिमेंट में मौजूद सभी <strong> एलिमेंट से बोल्ड वज़न हटा देगा. इसके बजाय, उन्हें सामान्य वज़न देगा, जो कि शुरुआती वैल्यू होती है.
unset कीवर्ड
अगर कोई प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट की जाती है या नहीं, तो unset प्रॉपर्टी अलग-अलग तरीके से काम करती है.
अगर कोई प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट की जाती है, तो unset कीवर्ड, inherit कीवर्ड जैसा ही होगा.
अगर प्रॉपर्टी को डिफ़ॉल्ट रूप से इनहेरिट नहीं किया जाता है, तो unset कीवर्ड initial के बराबर होता है.
यह याद रखना मुश्किल हो सकता है कि कौनसी सीएसएस प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट की जाती हैं. ऐसे में, unset मददगार हो सकता है.
उदाहरण के लिए, color को डिफ़ॉल्ट रूप से इनहेरिट किया जाता है, लेकिन margin को नहीं. इसलिए, यह लिखा जा सकता है:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
अब, margin हटा दिया जाता है और color, इनहेरिट की गई कैलकुलेट की गई वैल्यू पर वापस आ जाता है.
unset वैल्यू का इस्तेमाल all प्रॉपर्टी के साथ भी किया जा सकता है.
ऊपर दिए गए उदाहरण पर वापस आकर,
अगर ग्लोबल p स्टाइल में कुछ और प्रॉपर्टी जोड़ दी जाती हैं, तो क्या होगा?
सिर्फ़ वह नियम लागू होगा जो margin और color के लिए सेट किया गया था.
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
अगर aside p नियम को all: unset में बदला जाता है, तो इससे कोई फ़र्क़ नहीं पड़ता कि आने वाले समय में p पर कौनसी ग्लोबल स्टाइल लागू की जाती हैं. वे हमेशा अनसेट रहेंगी.
aside p {
margin: unset;
color: unset;
all: unset;
}
देखें कि आपको क्या समझ आया
इनहेरिटेंस के बारे में अपनी जानकारी को परखें
इनमें से कौनसी प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट की जाती हैं?
animationfont-sizecolortext-alignline-heightकौनसी वैल्यू तब तक inherit की तरह काम करती है, जब तक कि इनहेरिट करने के लिए कुछ नहीं होता और फिर initial की तरह काम करती है?
resetunsetsuperset