Chrome DevTools の Style タブの見方について(スタイルの継承)

Question

以下の画像の緑色で囲った箇所は薄い文字になっています。
これはどういう意味ですか?

例えば以下のコードは hoge クラスで定義されています。
(なぜ、 white-space は薄くなっておらず、 text-overflow は薄いの?)

  white-space: nowrap;
  text-overflow: ellipsis;

Comments

[m.ts10806]

公式のドキュメントもあるようですが、確認してみましたか？
https://developers.google.com/web/tools/chrome-devtools?hl=ja

[m.ts10806]

あとは「GoogleChrome　devtools style 見方」で検索してみるとか。

※調べたことについて何も書かれていないための指摘をしています。もし調べたこと試したことがあるのでしたら必ず記載してください。
https://teratail.com/help/question-tips#questionTips1-2

[naserehari]

確認せず、気軽に投稿してしまいました。
本来の目的からソレて yak shaving になっていたところの質問でした。
そうですよね。公式ドキュメントですよね。失礼しました。

teratail のガイドラインは知りませんでした。
まずは調べて、その旨も記載ですね。以後気をつけます。

[m.ts10806]

質問は編集できますので今調べて追記した方が良いかと。他人に注意されたことは時間たてば忘れます。

Answer 1

推測ですが、グレーアウトしているプロパティはいずれも「継承なし」となっているものではないでしょうか。

display - CSS: カスケーディングスタイルシート | MDN
background-color - CSS: カスケーディングスタイルシート | MDN
width - CSS: カスケーディングスタイルシート | MDN
overflow - CSS: カスケーディングスタイルシート | MDN
text-overflow - CSS: カスケーディングスタイルシート | MDN

「Inherit from」の欄には、継承されているプロパティだけではなくて、そのルール全てを表示して、継承のないものをグレーアウトしているように見えます。

Comments

[naserehari]

なるほど!
MDN には継承の「あり／なし」がキッチリ明記されているのですね。勉強になりました.