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