スタイルパネル(そのコンテキストではグレーアウトが意味する意味 - は適用されません)プロパティパネル。Chrome Devツールで計算されたプロパティがグレー表示されていると表示された場合
Computedプロパティがグレー表示されているとはどういう意味ですか?
例:
スタイルパネル(そのコンテキストではグレーアウトが意味する意味 - は適用されません)プロパティパネル。Chrome Devツールで計算されたプロパティがグレー表示されていると表示された場合
Computedプロパティがグレー表示されているとはどういう意味ですか?
例:
NB:この答えは何も確かな証拠を持っていない、それは時間に沿って私の観察に基づいています。
グレー計算プロパティがデフォルト、もが継承でもありません。これは、要素に対して定義されていないが、ランタイムレイアウトレンダリングに基づいて子または親から計算されたプロパティでのみ発生します。
display
がデフォルトとfont-size
あり、例として、この単純なページを取るが継承されます。 - テキストノード(フォントこの特定の例では
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
、height
は<p>
年代の子供たちから計算されますサイズ+ライン高さ)、width
はその親から計算されます。<div>
の幅は、親の<body>
からも計算されます。
EDIT:まあ、私はもう一度考えて、ここで私の意見に基づく答えがあります。 D
これらの矢印を展開することで、要素に適用される実際のルール、その要素に対して定義されたすべてのルール(直接または継承のいずれか、または開発者またはブラウザ):
ここであなたもブラウザ組み込みのルールを含むすべての定義にダウントレース、およびCSSカスケード(オーバーライド)機構を確認することができます。
CSS定義がない(直接定義されておらず、継承されず、ブラウザが組み込まれていない)要素の場合、トレースするソースはありません。プロパティ値は完全に実行時に計算されます。
あなたは表示中全てをチェックすると、より多くのグレーのプロパティが表示されます。これらはいずれも定義されていません。しかし、以前のスクリーンショットのものとは異なり、は実行時に計算されません - CSS仕様のデフォルト値です。
それは理にかなっています。その他の詳細:特定の宣言に値の起源を表示するには、グレーアウトされたプロパティをクリックすることはできません。 – AmbroseChapel
@AmbroseChapel私は再び考えて、私の答えを更新しました。私は実際に行ってソースコードを読むべきです。良い質問。 – Leo
灰色のプロパティは通常は「高さ」と「幅」であるため、灰色のプロパティは「実行時に計算される」ということは間違いありません。これについて考えると、要素の子に動的に依存する値要素内に含まれるテキストのテキストとフォントサイズ、または要素の幅が100%の場合の親の幅) –
...なぜ人々は「ツールをお勧めしますか見つけるために尋ねる」としてこれを閉じるために投票していますか?この質問は、*ツールに関するものです。*他の*ツールの推奨を求めるビジネスはありません。 – BoltClock
ありがとうございます。私は間違いなくツールを見つけたり、お勧めしたりすることを求めていません。 – AmbroseChapel