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

Program / 글쓴이

간단한 예 :

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 문서를 인용하고 싶습니다.

머리 글자

초기 CSS 키워드는 속성의 초기 값을 요소에 적용합니다. 모든 CSS 속성에서 허용되며 지정된 요소가 속성의 초기 값을 사용하도록합니다.

따라서 귀하의 예에 따르면 : 

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 요소의 속성을.

UNSET

unset CSS 키워드는 초기 및 상속 키워드의 조합입니다. 이 두 개의 다른 CSS 전체 키워드와 마찬가지로 CSS 속기 all을 포함한 모든 CSS 속성에 적용 할 수 있습니다. 이 키워드는 속성이 부모로부터 상속 된 경우 상속 된 값으로 재설정되고 그렇지 않은 경우 초기 값으로 재설정됩니다. 즉, 첫 번째 경우에는 inherit 키워드처럼 작동하고 두 번째 경우에는 초기 키워드처럼 작동합니다.

따라서 귀하의 예에 따르면 :

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>

스 니펫 확장

unset 속성이 단순히 요소 의 속성을 재설정 하는 방법에 유의하십시오 color.

결론적으로

아이디어는 매우 간단하지만 실제로는 두 CSS 속성에 대한 크로스 브라우저 호환성을 다룰 때주의를 기울일 것입니다.

답변