これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

--example-name のように 頭に -- 接頭辞がつけられたプロパティはカスタム・プロパティと呼び、(var) 関数を使用してドキュメント全体で再利用できる値を持ちます。

カスタム・プロパティはカスケードに関連しています。これらのプロパティは複数回表示させることが可能で、変数の値は、カスケードのアルゴリズムによって決められたカスタム・プロパティで定義された値とマッチします。

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

構文

--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);
}

結果

仕様書

Specification Status Comment
CSS Custom Properties for Cascading Variables Module Level 1
--* の定義
勧告候補 初期定義

ブラウザ対応状況

 

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応491529 なし36 あり
var()

49

481

15

31

29 — 552 3

なし36 あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4949152936 あり5.0
var()50 ?15

31

29 — 552 3

37 あり ?

1. From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.

3. 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.

 

関連項目

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

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