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

--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
--* の定義
勧告候補 初回定義

ブラウザーの対応

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

49

481

15

31

29 — 552 3

なし36 あり
env() ? ? ? ? ?

11.1

11 — 114

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

31

29 — 552 3

37 あり ?
env() ? ? ? ? ?

11.1

11 — 114

?

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.

4. Supported as constant.

関連情報

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

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