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