초기 값과 설정되지 않은 값의 차이점은 무엇입니까?

초기 값과 설정되지 않은 값의 차이점은 무엇입니까?

---

간단한 예 :

HTML

<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>

CSS

em {
    color:initial;
    color:unset;
}

initial과 의 차이점은 무엇입니까 unset? 브라우저 만 지원

CanIUse : CSS 설정되지 않은 값

개발자 Mozilla 웹 CSS 이니셜

---

귀하의 링크 에 따르면 :

unset 속성이 상속 된 경우 "상속", 속성이 상속되지 않은 경우 "초기"와 동일한 CSS 값입니다.

다음은 그 예입니다.

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>

차이가 중요한 시나리오는 스타일 시트의 일부 CSS를 재정의하려고하지만 브라우저 기본값으로 다시 설정하는 것보다 값이 상속되는 것을 선호하는 경우입니다.

예를 들면 :

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>

---

각각의 차이점을 살펴볼 때 향후 참조를 위해 공식 CSS | MDN 문서를 인용하고 싶습니다.

머리 글자

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

Therefore according to your example:

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>

Note how the initial property retains the initial the color property of the element.

UNSET

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

Therefore according to your example:

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>

Note how the unset property simply resets the color property of the element.

IN CONCLUSION

The idea is quite straight forward, but in practice I would advice caution when dealing with cross browser compatibility for both CSS properties... that is as of today.

ReferenceURL : https://stackoverflow.com/questions/33834049/what-is-the-difference-between-the-initial-and-unset-values