web-dev-qa-db-ja.com

ブラウザでCSS変数をどのように検査しますか？

私は変数を定義しています 仕様に従って のように：

:root {
 --my-colour: #000;
}

そして、次のようにそれらにアクセスします：

.my-element {
  background: var( --my-colour );
}

うまくいきます。

しかし、:root CSSルールをデバッグまたは検査して、定義されている変数とその値を確認する方法があるかどうか疑問に思いました。

私の理解から、:rootセレクターとhtmlセレクターはどちらも同じ要素をターゲットとしていますが、Chromeのデバッグツールを使用してhtml要素を検査すると、定義されたものは何も表示されません。

inspecting the html element

定義されている変数とその値を見つける方法はありますか？

htmlcssgoogle-chrome-devtoolsweb-componentcss-variables
22
Paul. B

Chrome Canaryを使用すると、要素のComputedスタイルを表示してすべて表示フィルターを有効にすることで、これにアクセスできます。

Computed tab ... Example

28
James Donnelly

Safari（43）-開発者ツールには、値を表示するためにクリックできる小さなアイコンがあります。

enter image description here

Firefox（58）-開発者ツールでは、CSS変数に点線が表示され、ホバーすると値がツールチップとして表示されます。

enter image description here

Chrome（67）-開発者ツールでは、CSS変数の値もホバー時にツールチップとして表示されます。値が色の場合、ボックスに色が表示されます。 （スクリーンショットを撮るのは難しいですが、Firefoxに似ています）

7
Frank Lämmer