प्रारंभिक और परेशान मानों के बीच अंतर क्या है?

Question

एक सरल उदाहरण:

एचटीएमएल

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

सीएसएस

em {
    color:initial;
    color:unset;
}

बीच क्या अंतर है initialऔर unset? केवल ब्राउज़र का समर्थन करता है

CanIUse: सीएसएस अनसेट मूल्य

डेवलपर मोज़िला वेब सीएसएस प्रारंभिक

Answer 1

आपके लिंक के अनुसार :

unset यदि कोई संपत्ति विरासत में मिली है या संपत्ति "विरासत में नहीं मिली है तो" प्रारंभिक "के समान सीएसएस वैल्यू है

यहाँ एक उदाहरण है:

pre {
  color: #f00;
}
.initial {
  color: initial;
}
.unset {
  color: unset;
}

<pre>
  <span>This text is red because it is inherited.</span>
  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>
  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>
</pre>

ऐसा परिदृश्य जहां अंतर की बात है यदि आप अपनी स्टाइलशीट में कुछ सीएसएस को ओवरराइड करने की कोशिश कर रहे हैं, लेकिन आप पसंद करेंगे कि ब्राउज़र डिफ़ॉल्ट पर वापस सेट करने के बजाय मान विरासत में मिला है।

उदाहरण के लिए:

pre {
  color: #00f;
}
span {
  color: #f00;
}
.unset {
  color: unset;
}
.initial {
  color: initial;
}

<pre>
  <em>Text in this 'pre' element is blue.</em>
  <span>The span elements are red, but we want to override this.</span>
  <span class="unset">[color: unset]: This span's color is unset (blue, because it is inherited from the pre).</span>
  <span class="initial">[color: initial]: This span's color is initial (black, the browser default).</span>
</pre>

Answer 2

मैं भविष्य में संदर्भ के लिए आधिकारिक सीएसएस एमडीएन प्रलेखन उद्धृत करना चाहता हूं, जब प्रत्येक के बीच मतभेदों को देखते हुए:

प्रारंभिक

प्रारंभिक सीएसएस कीवर्ड किसी संपत्ति के प्रारंभिक मूल्य को एक तत्व पर लागू करता है। यह प्रत्येक सीएसएस संपत्ति पर अनुमत है और उस तत्व का कारण बनता है जिसके लिए यह संपत्ति के प्रारंभिक मूल्य का उपयोग करने के लिए निर्दिष्ट है।

इसलिए आपके उदाहरण के अनुसार:

em {
    color:initial;
    /* color:unset; */
}

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

ध्यान दें कि कैसे प्रारंभिक संपत्ति को बरकरार रखे हुए प्रारंभिकcolor तत्व की संपत्ति।

सेट किए बिना

शुरुआत सीएसएस कीवर्ड प्रारंभिक और विरासत कीवर्ड का संयोजन है। इन दो अन्य सीएसएस-विस्तृत कीवर्ड की तरह, इसे सीएसएस शॉर्टहैंड सहित किसी भी सीएसएस संपत्ति पर लागू किया जा सकता है। यदि यह अपने माता-पिता से विरासत में मिला है या नहीं तो इसके प्रारंभिक मूल्य के लिए यह कीवर्ड संपत्ति को उसके उत्तराधिकारी मूल्य पर रीसेट करता है। दूसरे शब्दों में, यह पहले मामले में इनहेरिट कीवर्ड की तरह व्यवहार करता है और दूसरे मामले में शुरुआती कीवर्ड की तरह।

इसलिए आपके उदाहरण के अनुसार:

em {
  /* color:initial; */
  color:unset;
}

<p style="color:red!important"> 
  this text is red 
  <em> 
    this text's color has been unset (e.g. red)
  </em>
  this is red again
</p>

ध्यान दें कि कैसे परेशान संपत्ति बस तत्व की संपत्ति को रीसेटcolor करती है।

निष्कर्ष के तौर पर

विचार काफी सीधा है, लेकिन व्यवहार में मैं सीएसएस गुणों के लिए क्रॉस ब्राउज़र संगतता से निपटने के दौरान सावधानी बरतने की सलाह दूंगा ... जो कि आज की तरह है।