सीएसएस पॉडकास्ट - 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;
}
इसके बाद, कॉन्टेंट के किसी लेख में लिंक एलिमेंट जोड़ा जाता है,
.my-button
की class
वैल्यू के साथ. हालांकि, Google में एक समस्या है,
टेक्स्ट वैसा नहीं है जैसा आपको चाहिए था. ऐसा कैसे हुआ?
अगर आप प्रॉपर्टी के लिए कोई वैल्यू तय नहीं करते हैं, तो कुछ सीएसएस प्रॉपर्टी इनहेरिट हो जाती हैं.
इस बटन के मामले में, इस सीएसएस से 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 रेफ़रंस से लिया गया है:
- ऐज़िमुथ
- बॉर्डर को छोटा करना
- border-spacing
- कैप्शन का साइड
- रंग
- कर्सर
- निर्देश
- खाली सेल
- font-family
- font-size
- फ़ॉन्ट स्टाइल
- फ़ॉन्ट-वैरिएंट
- फ़ॉन्ट का वज़न
- फ़ॉन्ट
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- ऑर्फ़न
- कोटेशन
- टेक्स्ट की अलाइनमेंट
- टेक्स्ट-इंडेंट
- text-transform
- विज़िबिलिटी
- व्हाइट-स्पेस
- विधवा
- word-spacing
इनहेरिटेंस कैसे काम करता है
हर एचटीएमएल एलिमेंट में हर सीएसएस प्रॉपर्टी होती है. यह प्रॉपर्टी, डिफ़ॉल्ट रूप से तय होती है. साथ ही, इसमें शुरुआती वैल्यू भी शामिल होती है. शुरुआती वैल्यू ऐसी प्रॉपर्टी होती है जिसे इनहेरिट नहीं किया जाता और यह डिफ़ॉल्ट के तौर पर दिखती है अगर कैस्केड उस एलिमेंट के लिए वैल्यू कैलकुलेट नहीं कर पाता है.
ऐसी प्रॉपर्टी जिन्हें नीचे की ओर कैस्केड किया जा सकता है,
और चाइल्ड एलिमेंट को एक कंप्यूट किया गया वैल्यू मिलेगी, जो उसके पैरंट की वैल्यू को दिखाती है.
इसका मतलब है कि अगर किसी पैरंट ने font-weight
को bold
पर सेट किया है, तो सभी चाइल्ड एलिमेंट बोल्ड होंगे,
जब तक कि font-weight
किसी अलग वैल्यू पर सेट न हो,
या उपयोगकर्ता एजेंट स्टाइलशीट में उस एलिमेंट के लिए font-weight
की वैल्यू हो.
इनहेरिटेंस को साफ़ तौर पर इनहेरिट और कंट्रोल करने का तरीका
इनहेरिटेंस, एलिमेंट पर अनचाहे तरीकों से असर डाल सकता है. इसलिए, सीएसएस के पास ऐसे टूल हैं जिनसे वह इन चीज़ों में मदद कर सकता है.
inherit
कीवर्ड
inherit
कीवर्ड का इस्तेमाल करके, किसी भी प्रॉपर्टी को उसकी पैरंट वैल्यू से इनहेरिट किया जा सकता है.
इस कीवर्ड के इस्तेमाल का एक कारगर तरीका अपवाद बनाना है.
strong {
font-weight: 900;
}
यह सीएसएस स्निपेट सभी <strong>
एलिमेंट को font-weight
का 900
सेट करता है,
डिफ़ॉल्ट bold
वैल्यू के बजाय यह वैल्यू होगी, जो 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
वापस इनहेरिट की गई कंप्यूट की गई वैल्यू पर सेट हो गया है.
all
प्रॉपर्टी के साथ भी, unset
वैल्यू का इस्तेमाल किया जा सकता है.
ऊपर दिए गए उदाहरण पर वापस चलते हैं.
अगर ग्लोबल 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;
}
देखें कि आपको कितना समझ आया है
वंशानुक्रम के बारे में अपनी जानकारी को परखें
इनमें से कौनसी प्रॉपर्टी इनहेरिट की जा सकती हैं?
line-height
animation
font-size
color
text-align
कौनसी वैल्यू inherit
की तरह काम करती है, जब तक कि इनहेरिट करने के लिए कुछ न हो और
फिर initial
की तरह काम करता है?
superset
reset
unset