2016-01-10 34 views
47

スタイルパネル(そのコンテキストではグレーアウトが意味する意味 - は適用されません)プロパティパネル。Chrome Devツールで計算されたプロパティがグレー表示されていると表示された場合

Computedプロパティがグレー表示されているとはどういう意味ですか?

例:

enter image description here

+9

...なぜ人々は「ツールをお勧めしますか見つけるために尋ねる」としてこれを閉じるために投票していますか?この質問は、*ツールに関するものです。*他の*ツールの推奨を求めるビジネスはありません。 – BoltClock

+3

ありがとうございます。私は間違いなくツールを見つけたり、お勧めしたりすることを求めていません。 – AmbroseChapel

答えて

36

NB:この答えは何も確かな証拠を持っていない、それは時間に沿って私の観察に基づいています。

グレー計算プロパティがデフォルト、が継承でもありません。これは、要素に対して定義されていないが、ランタイムレイアウトレンダリングに基づいて子または親から計算されたプロパティでのみ発生します。

displayがデフォルトとfont-sizeあり、例として、この単純なページを取るが継承されます。 - テキストノード(フォントこの特定の例では

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

enter image description here

height<p>年代の子供たちから計算されますサイズ+ライン高さ)、widthはその親から計算されます。<div>の幅は、親の<body>からも計算されます。


EDIT:まあ、私はもう一度考えて、ここで私の意見に基づく答えがあります。 D

これらの矢印を展開することで、要素に適用される実際のルール、その要素に対して定義されたすべてのルール(直接または継承のいずれか、または開発者またはブラウザ):

enter image description here

ここであなたもブラウザ組み込みのルールを含むすべての定義にダウントレース、およびCSSカスケード(オーバーライド)機構を確認することができます。

CSS定義がない(直接定義されておらず、継承されず、ブラウザが組み込まれていない)要素の場合、トレースするソースはありません。プロパティ値は完全に実行時に計算されます。

あなたは表示中全てをチェックすると、より多くのグレーのプロパティが表示されます。これらはいずれも定義されていません。しかし、以前のスクリーンショットのものとは異なり、は実行時に計算されません - CSS仕様のデフォルト値です。

enter image description here

+1

それは理にかなっています。その他の詳細:特定の宣言に値の起源を表示するには、グレーアウトされたプロパティをクリックすることはできません。 – AmbroseChapel

+0

@AmbroseChapel私は再び考えて、私の答えを更新しました。私は実際に行ってソースコードを読むべきです。良い質問。 – Leo

+0

灰色のプロパティは通常は「高さ」と「幅」であるため、灰色のプロパティは「実行時に計算される」ということは間違いありません。これについて考えると、要素の子に動的に依存する値要素内に含まれるテキストのテキストとフォントサイズ、または要素の幅が100%の場合の親の幅) –

関連する問題