The CSS Podcast - 005: Inheritance
मान लें कि आपने एलिमेंट को बटन जैसा दिखाने के लिए, अभी-अभी कुछ सीएसएस लिखी है.
<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 रेफ़रंस से ली गई है:
- ऐज़िमथ
- 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
- अनाथ बच्चे
- quotes
- text-align
- text-indent
- text-transform
- visibility
- white-space
- विधवाएं
- 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> एलिमेंट का font-weight 500 होगा.
इस वैल्यू को साफ़ तौर पर सेट किया जा सकता है. हालांकि, अगर आपने inherit का इस्तेमाल किया है और आने वाले समय में .my-component की सीएसएस में बदलाव होता है, तो इस बात की गारंटी दी जा सकती है कि आपका <strong> अपने-आप अपडेट हो जाएगा.
initial कीवर्ड
इनहेरिटेंस की वजह से, आपके एलिमेंट में समस्याएं आ सकती हैं. initial आपको रीसेट करने का एक बेहतरीन विकल्प देता है.
आपने पहले सीखा था कि सीएसएस में हर प्रॉपर्टी की डिफ़ॉल्ट वैल्यू होती है.
initial कीवर्ड, किसी प्रॉपर्टी को उसकी शुरुआती डिफ़ॉल्ट वैल्यू पर वापस सेट करता है.
aside strong {
font-weight: initial;
}
यह स्निपेट, <strong> एलिमेंट के अंदर मौजूद सभी <strong> एलिमेंट से बोल्ड फ़ॉन्ट हटा देगा. इसके बजाय, उन्हें सामान्य फ़ॉन्ट में बदल देगा, जो कि शुरुआती वैल्यू है.<aside>
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;
}
revert कीवर्ड
कैस्केड के बारे में बताए गए सबक में आपने सीखा था कि स्टाइल अलग-अलग सोर्स से मिलती हैं. जैसे, उपयोगकर्ता एजेंट की बुनियादी स्टाइल, उपयोगकर्ता की पसंद के हिसाब से स्टाइल, और आपकी बनाई गई स्टाइल. revert कीवर्ड, उसी ऑरिजिन में सेट की गई स्टाइल को पहले जैसा कर देता है जिसमें revert कीवर्ड का इस्तेमाल किया गया है.
यह तब काम आता है, जब आपने कोई स्टाइल सेट की हो, लेकिन आपको उसे कुछ उदाहरणों में लागू नहीं करना हो. inherit, initial, और unset से यह पता चलता है कि किसी स्टाइल की वैल्यू कैसे कैलकुलेट की जाती है. वहीं, revert से सिर्फ़ यह पता चलता है कि आपने जो अन्य स्टाइल लिखे हैं वे लागू नहीं होते.
p {
padding: 2em;
}
aside p {
padding: revert;
}
इस स्निपेट में, <p> एलिमेंट को पैडिंग दी गई है. हालांकि, जब <p> एलिमेंट किसी <aside> के अंदर होता है, तब यह padding के बारे में कोई जानकारी नहीं देता. इसके बजाय, यह उपयोगकर्ता की पसंद के हिसाब से तय की गई स्टाइल (अगर कोई सेट है) या उपयोगकर्ता एजेंट की बुनियादी स्टाइल पर वापस आ जाती है.
revert-layer कीवर्ड
कैस्केड लेयर, स्टाइल को व्यवस्थित करने का एक उपयोगी तरीका है. साथ ही, यह कैस्केड के ऑथर ओरिजिन में स्टाइल को प्राथमिकता देने का भी एक तरीका है. revert-layer कीवर्ड, revert की तरह ही होता है. हालांकि, यह किसी प्रॉपर्टी के लिए, लेखक की कोई भी स्टाइल लागू न करने के बजाय, सिर्फ़ मौजूदा लेयर में मौजूद स्टाइल को पहले जैसा करता है.
अगर तीसरे पक्ष की यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी का इस्तेमाल किया जा रहा है, तो उसे किसी लेयर में इंपोर्ट करना एक अच्छा तरीका है. साथ ही, किसी भी तरह के बदलाव को ज़्यादा प्राथमिकता वाली लेयर में जोड़ना चाहिए. इसके बाद, revert-layer का इस्तेमाल करके, किसी भी बदलाव को हटाया जा सकता है. ऐसा करने पर, यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी के डिफ़ॉल्ट सेटिंग का इस्तेमाल किया जाएगा.
अगर कोई अन्य लेयर, प्रॉपर्टी के लिए वैल्यू तय नहीं करती है, तो यह revert की तरह काम करेगी. साथ ही, पहले के ऑरिजिन से वैल्यू का इस्तेमाल करेगी.
देखें कि आपको कितना समझ आया
इनहेरिटेंस के बारे में अपनी जानकारी को परखें
इनमें से कौनसी प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट की जाती हैं?
animationfont-sizecolortext-alignline-heightकौनसी वैल्यू inherit की तरह काम करती है, जब तक कि इनहेरिट करने के लिए कुछ न हो. इसके बाद, यह initial की तरह काम करती है?
resetunsetsuperset