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

var(--header-color, blue);

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

構文

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

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

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

<custom-property-name>
カスタムプロパティの名前で、二つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 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() の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
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 ?

凡例

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

関連情報

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

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