Chrome Dev Tools에서 계산 된 속성이 회색으로 표시되면 무엇을 의미합니까?

제발 참고, 하지 스타일 패널 (나는 회색으로 어떤 것을 적용 상황에하지의 방법을 알고있다), 그러나 이상 다음 패널, 계산 된 속성 패널.

계산 된 속성이 회색으로 표시되는 것은 무엇을 의미합니까?

예:

NB :이 답변은 확실한 증거가 없으며 시간에 따른 내 관찰을 기반으로합니다.

회색 계산 된 속성은 도 기본적으로 도 물려 받았다. 이는 요소에 대해 정의되지 않았지만 런타임 레이아웃 렌더링을 기반으로 하위 또는 상위에서 계산 된 속성에서만 발생합니다.

이 간단한 페이지를 예로 들면 display기본값이며 font-size상속됩니다.

<style>
  div { font-size: 13px; }
</style>
<div>
  <p>asdf</p>
</div>

이 특정 예에서, height계산된다 <p>의 아이 - 텍스트 노드 (폰트 크기를 더한 라인 높이)를, width그 부모로부터 산출 - <div>'또한 부모로부터 계산의 폭을 <body>.

편집 : 글쎄요, 다시 생각했습니다. 여기에 내 의견 기반 답변이 있습니다. 나는 정말로 가서 나중에 Chromium 소스 코드를 살펴 봐야한다. : D

이러한 화살표를 확장하면 요소에 대해 정의 된 모든 규칙 (개발자 또는 브라우저에 의해 직접 또는 상 속됨) 중에서 요소에 적용된 실제 규칙을 확인할 수 있습니다.

여기에서 브라우저 내장 규칙을 포함하여 모든 정의를 추적 할 수 있으며 CSS 계단식 (재정의) 메커니즘으로 확인할 수 있습니다.

따라서 CSS 정의가없는 요소의 경우 (직접 정의되지 않고 상속되지 않으며 브라우저가 내장되지 않음) 추적 할 소스가 없습니다. 그리고 속성 값은 완전히 런타임 계산됩니다.

당신이 선택하면 모두 표시 , 더 회색 속성이 표시됩니다. 이것들은 어디에도 정의되어 있지 않습니다. 그러나 이전 스크린 샷과 달리 이는 런타임 계산 이 아니라 CSS 사양 기본값입니다.