--example-name のように、頭に -- 接頭辞がつけられたプロパティはカスタムプロパティを表し、 var 関数を使用して他の宣言の中で使用することができる値を持ちます。

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

初期値see prose
適用対象すべての要素
継承あり
メディアすべて
計算値as specified with variables substituted
アニメーションの種類個別
正規順序構文通り

構文

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>
シーケンスが許可されていないトークンを含んでいない限り、この値は 1 つ以上のトークンのシーケンスに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。

形式文法

<declaration-value>

HTML

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

CSS

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

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

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

#container {
  --first-color: #48ff32;
}

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

結果

仕様書

仕様書 状態 備考
CSS Custom Properties for Cascading Variables Module Level 1
--* の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 49Edge 完全対応 15Firefox 完全対応 29IE 未対応 なしOpera 完全対応 36Safari 完全対応 ありWebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 完全対応 15Firefox Android 完全対応 29Opera Android 完全対応 36Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
var()
実験的
Chrome 完全対応 49
完全対応 49
完全対応 48
無効
無効 From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 15Firefox 完全対応 31
完全対応 31
未対応 29 — 55
補足 無効
補足 From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
無効 From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 36Safari 完全対応 ありWebView Android 完全対応 50Chrome Android ? Edge Mobile 完全対応 15Firefox Android 完全対応 31
完全対応 31
未対応 29 — 55
補足 無効
補足 From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
無効 From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 37Safari iOS 完全対応 ありSamsung Internet Android ?
env()
実験的
Chrome 未対応 なしEdge ? Firefox ? IE ? Opera ? Safari 完全対応 11.1
完全対応 11.1
未対応 11 — 11
代替名
代替名 非標準の名前 constant を使用しています。
WebView Android ? Chrome Android 完全対応 69Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 11.1
完全対応 11.1
未対応 11 — 11
代替名
代替名 非標準の名前 constant を使用しています。
Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, maechabin
最終更新者: mfuji09,