web-dev-qa-db-ja.com

Chrome Dev Toolsで計算されたプロパティがグレー表示される場合はどういう意味ですか

notStylesパネル（そのコンテキストで灰色表示の意味はわかります—適用されません）が、次のパネルのComputedプロパティに注意してくださいパネル。

計算されたプロパティがグレー表示されるとはどういう意味ですか？

例：

enter image description here

cssgoogle-chromegoogle-chrome-devtools
71
AmbroseChapel

NB：この答えには確固たる証拠はありません。それは、私の観察に基づいています。

灰色の計算されたプロパティは、notherデフォルト、nor継承です。これは、エレメントに対して定義されていないが、ランタイムレイアウトレンダリングに基づいて子または親から計算されたプロパティでのみ発生します。

この単純なページを例にとると、displayがデフォルトで、font-sizeは継承されます：

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

enter image description here

この特定の例では、heightは<p>の子-テキストノード（フォントサイズと行の高さ）、widthはその親から計算されます-<div>の幅。親からも計算されます<body>。

EDIT：さて、私はここに私の意見に基づいた答えだと思いました。後でChromiumのソースコードを実際に見てみましょう：D

これらの矢印を展開すると、（開発者またはブラウザによって直接または継承されて）要素に対して定義されたすべての要素の中で、要素に適用されている実際のルールを確認できます。

enter image description here

ここでは、ブラウザのビルトインルールを含むすべての定義にトレースダウンし、CSSカスケード（オーバーライド）メカニズムで確認できます。

そのため、CSS定義（直接定義、継承、ブラウザ組み込みなし）がない要素については、トレースするソースがありません。そして、プロパティ値は完全に実行時に計算されます。

Show allをチェックすると、より灰色のプロパティが表示されます。これらはどこでも定義されていません。ただし、前のスクリーンショットのものとは異なり、これらはランタイム計算ではありません-CSS仕様のデフォルト値です。

enter image description here

46
Leo