CSSvar() 関数は、他のプロパティの値の一部の代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。

var(--header-color, blue);

var() 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成さてしまいます。)

構文

関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの2番目の引数は、フォールバック値として機能します。 最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。

var( <custom-property-name> [, <declaration-value> ]? )

メモ: フォールバックの構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば var(--foo, red, blue) では、 red, blue をフォールバックとして定義します。つまり、最初のコンマから関数の最後にかけてのものは、フォールバック値と見なされます。

<custom-property-name>
2つのハイフンで始まる識別子によって表される、参照されるカスタムプロパティの名前。カスタムプロパティは、作成者とユーザーだけが使用できます CSSはここに提示されているものを超えて意味を与えません。
<declaration-value>
フォールバック値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり ), ], }, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
/* フォールバック */
/* コンポーネント内のスタイル: */
.component .header {
  color: var(--header-color, blue); /* header-color という変数は設定されていないため、フォールバック値である blue がセットされます */
}

.component .text {
  color: var(--text-color, black);
}

/* より規模の大きなアプリケーションのスタイルでは: */
.component {
  --text-color: #080;
}

仕様書

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

49

481

15

31

29 — 552 3

なし36 あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応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.

関連情報

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

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