मैंने divs के लिए डिस्प्ले प्रॉपर्टी को in . पर सेट किया है लाइन-ब्लॉक । मैंने तब चार वर्ग बनाए:
- नो-वर, जो डिस्प्ले को
inheritपर सेट करता है - var, जो डिस्प्ले को
inheritपर सेट वेरिएबल पर सेट करता है - var-none, जो डिस्प्ले को
noneपर वेरिएबल सेट पर सेट करता है - वर-डिफॉल्ट, जो डिस्प्ले को
inheritपर सेट वेरिएबल औरgridके डिफॉल्ट पर सेट करता है
प्रत्येक वर्ग द्वारा उपयोग की जाने वाली वास्तविक शैली सही प्रतीत नहीं होती है, हालांकि:
- नो-वर वर्ग सही ढंग से प्रदर्शित करता है
block - var वर्ग को वेरिएबल से
inheritमान नहीं मिलता है औरinline-blockके रूप में प्रदर्शित होता है - var-none वर्ग सही ढंग से प्रदर्शन को
noneपर सेट करता है और छिपा हुआ है - वर-डिफॉल्ट क्लास को वेरिएबल से
inheritमान नहीं मिलता है और डिस्प्ले को डिफॉल्ट पर सेट करता है
इनमें से प्रत्येक वर्ग के लिए मैंने रंग संपत्ति के लिए चर और डिफ़ॉल्ट जोड़े, जो सभी अपेक्षित रूप से काम करते हैं। क्या चरों को inherit और unset मानों को अनदेखा करना चाहिए?
:root {
--display: inherit;
--display-none: none;
--color: red;
}
div {
display: inline-block;
color: green;
}
.no-var {
display: inherit;
color: red;
}
.var {
display: var(--display);
color: var(--color);
}
.var-none {
display: var(--display-none);
}
.var-default {
display: var(--display, grid);
color: var(--color, purple);
}<div class="no-var">
No variable
</div>
<div class="no-var">
No variable
</div>
<div class="var">
Variable
</div>
<div class="var">
Variable
</div>
<div class="var-none">
None
</div>
<div class="var-none">
None
</div>
<div class="var-default">
Default
</div>
<div class="var-default">
Default
</div>1 उत्तर
ऐसी स्थिति में, inherit का उपयोग कस्टम प्रॉपर्टी के लिए एक मान के रूप में किया जाता है और var() का उपयोग करके inherit मान पर इसका मूल्यांकन नहीं किया जाएगा।
इस मुद्दे को समझने के लिए यहां एक बुनियादी उदाहरण दिया गया है:
.box {
--c:inherit;
color:var(--c,red);
}<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>ध्यान दें कि दूसरे मामले में हमारे पास नीला रंग कैसे है क्योंकि कस्टम प्रॉपर्टी को यह मान शीर्ष div से विरासत में मिला है, फिर इसे उस मान पर निकाला जा रहा है। पहले मामले में, हम डिफ़ॉल्ट रंग का उपयोग करेंगे क्योंकि इनहेरिट करने के लिए कुछ भी नहीं है।
दूसरे शब्दों में, inherit को कस्टम प्रॉपर्टी के लिए माना जाएगा, न कि उस प्रॉपर्टी के लिए जहां आप var() का उपयोग करके कस्टम प्रॉपर्टी का मूल्यांकन करेंगे। आपको इनहेरिट करने के लिए के बराबर परिकलित मान वाली कोई कस्टम प्रॉपर्टी नहीं मिलेगी, लेकिन इनहेरिट किए गए मान के बराबर परिकलित मान के साथ।
विनिर्देश से:
कस्टम गुण साधारण गुण हैं, इसलिए उन्हें किसी भी तत्व पर घोषित किया जा सकता है, सामान्य विरासत और कैस्केड नियमों के साथ हल किया जाता है