カスタムプロパティ (--*): CSS 変数

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Some parts of this feature may have varying levels of support.

接頭辞 -- が付いたプロパティ名、例えば --example-name は、カスタムプロパティを表し、 var() 関数を用いて他の宣言の中で使用することができる値を持ちます。

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

初期値本文を参照
適用対象すべての要素
継承あり
計算値変数を代入して指定した通り
アニメーションの種類離散値

構文

css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>

この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。

メモ: カスタムプロパティ名は大文字・小文字の区別があります。 --my-color--My-color とは別なカスタムプロパティとして扱われます。

形式文法

Error: could not find syntax for this item

HTML

html
<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
<div id="container">
  <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
</div>

CSS

css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

結果

仕様書

Specification
CSS Custom Properties for Cascading Variables Module Level 1
# defining-variables

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
--*
env()
Safe area inset variable safe-area-inset-bottom
Safe area inset variable safe-area-inset-left
Safe area inset variable safe-area-inset-right
Safe area inset variable safe-area-inset-top
Window Controls Overlay variable titlebar-area-height
Window Controls Overlay variable titlebar-area-width
Window Controls Overlay variable titlebar-area-x
Window Controls Overlay variable titlebar-area-y
var()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Uses a non-standard name.
Has more compatibility info.

関連情報