愚かなWeb要素インスペクター(サファリ/クローム)の質問ですが、一部のプロパティが淡色表示されている理由がわかりません。
5 に答える
ソースによると、Webkitインスペクターは、 inspector.cssから「継承」または「暗黙的」であるcssスタイルに50%の不透明度を適用します。
.styles-section .properties .implicit, .styles-section .properties .inherited {
opacity: 0.5;
}
- 暗黙的とは、
border: 1px solid red
color: red
より灰色になるような複合プロパティの下にあるものです。 - 継承は、明示的な「継承」値を持つものです。
現在のクロームバージョンは他のいくつかの値を灰色に着色しているように見えますが、インスペクターのインスペクターが機能していません:(
私にとって、それは単なる文字セットの混合の問題でした。
HTMLファイル自体とCSSファイルの1つはBOMを使用してUTF-8としてエンコードされ、他のCSSファイルはANSIとしてエンコードされました。Chromeがほとんどすべてを正しく表示する方法をまだ理解できません。すべてのファイルをBOMなしでUTF-8に戻したところ、問題は解決しました。BOMの存在を示唆してくれたW3Cバリデーターに感謝します。
これが少なくとも他の誰かに役立つことを願っています。
あなたが提供したリンクでそれを見た後、色あせた(薄暗い)ものは、それらにリンクされたブラウザ操作を持たないスタイルルールです、例えば:
横にある小さな矢印をクリックするbackground:
と、ChromeがCSSを解釈するために使用するルールのリストが表示されます。
float
とheight
では、解釈できる方法はほとんど1つしかないため、Chromeは、意図したとおりに表示するためにブラウザ固有のスタイルを追加する必要はありません。
それがそれを説明するのに役立つことを願っています:)
フェードルールは、ブラウザから特別な注意を払う必要のないルールです:)
また、「画像として解釈されますが、mimeタイプのtext / cssで転送されます」ですか?私はそうだった。
これで解決しました: ChromeはCSSスタイルシートを画像として解釈します
基本的に、cssファイルに「background:url()」または「background:url( "")」が含まれている場合は、コメントアウトするか削除します(または、パスを挿入するだけです)。 chromeinspectorのcssスタイルをアクティブとしてロードします。
推測ですが、計算されたスタイルを簡単に区別する方法ではないかどうかを確認しましたか?