सीएसएस पॉडकास्ट - 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;
}
देखें कि आपको कितना समझ आया है
वंशानुक्रम के बारे में अपनी जानकारी को परखें
इनमें से कौनसी प्रॉपर्टी इनहेरिट की जा सकती हैं?
animationfont-sizecolortext-alignline-heightकौनसी वैल्यू inherit की तरह काम करती है, जब तक कि इनहेरिट करने के लिए कुछ न हो और
फिर initial की तरह काम करता है?
resetunsetsuperset