CSS var() 関数
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年4月以降、すべてのブラウザーで利用可能です。
var() は CSS の関数で、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。
試してみましょう
border-color: var(--color-a);
border-color: var(--color-b);
border-color: var(--color-c);
<section class="default-example" id="default-example">
<div id="example-element">
:root に 3 つの色オプションが設定されています。これらを使用して境界線の色を変更してください。
</div>
</section>
:root {
--color-a: pink;
--color-b: green;
--color-c: rebeccapurple;
}
#example-element {
border: 10px solid black;
padding: 10px;
}
var() 関数は、プロパティ名やセレクターなど、プロパティ値以外では使用できません。（使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。）
構文
/* 基本的な使用 */
var(--custom-prop);
/* 代替値つき */
var(--custom-prop,); /* 代替値は空の値 */
var(--custom-prop, initial); /* 代替値はプロパティの初期値 */
var(--custom-prop, red);
var(--custom-prop, var(--default-value));
var(--custom-prop, var(--default-value, red));
関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが定義されていなかったり、CSS 全体のキーワードに等しかったりした場合、関数は 2 つ目の値を使用します。
代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば var(--foo, red, blue) では、 red, blue を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。
値
<custom-property-name>-
カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。CSS はここに提示されているものを超えて意味を与えません。
<declaration-value>-
カスタムプロパティの代替値で、カスタムプロパティが定義されていなかったり、CSS 全体のキーワードに等しかったりした場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり
),],}, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。代替値もvar()構文を使用したカスタムプロパティとして定義できます。代替値が省略され、かつカスタムプロパティが定義されていない場合、var()関数は無効な値として解決されます。メモ:
var(--a,)は有効であり、独自のプロパティ--aが定義されていなかったり、CSS 全体のキーワードに等しかったりした場合は、var()を無に置き換えられます。
形式文法
<var()> =
var( <custom-property-name> , <declaration-value>? )
例
:root に設定したカスタムプロパティの使用
CSS
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
結果
ここでは、background-color プロパティの値がカスタムプロパティ --main-bg-color を通じて設定されます。したがって、HTML 本体の背景色はピンクになります。
設定前にカスタムプロパティを使用
CSS
body {
background-color: var(--main-bg-color);
}
:root {
--main-bg-color: pink;
}
結果
この例では、カスタムプロパティの設定が後になったとしても、HTML の body の背景色はピンクのままになります。
他のファイルで設定されたカスタムプロパティの使用
HTML
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="1.css" />
<link rel="stylesheet" href="2.css" />
</head>
<body></body>
</html>
CSS
/* 1.css */
body {
background-color: var(--main-bg-color);
}
/* 2.css */
:root {
--main-bg-color: pink;
}
結果
カスタムプロパティが別のファイルで宣言されていても、HTML の body の背景色はピンクになります。
プロパティが設定されていなかった場合に使用する代替値付きのカスタムプロパティ
HTML
<div class="component">
<h1 class="header">見出し</h1>
<p class="text">テキスト</p>
</div>
CSS
/* component のスタイルでは */
.component .header {
/* header-color が設定されていなければ、代替値である青のままになる */
color: var(--header-color, blue);
}
.component .text {
color: var(--text-color, black);
}
/* より規模の大きなアプリケーションのスタイルでは */
.component {
--text-color: #008800;
}
結果
--header-color が設定されていないため、テキスト「見出し」は代替値である青色になります。
代替値としてカスタムプロパティを使用
CSS
:root {
--backup-bg-color: teal;
}
body {
background-color: var(--main-bg-color, var(--backup-bg-color, white));
}
結果
--main-bg-color が設定されていないため、本体の background-color は --backup-bg-color（ティール色）に代替されます。
無効な値
var() 関数は次の場合に、無効な値に解決することがあります。
- カスタムプロパティが定義されておらず、代替値も指定されていない。
- カスタムプロパティは定義されているが、その値が使用されているプロパティに対して不正な値である。
この場合、プロパティは値 unset を持つものとして扱われます。これは、変数が他の構文エラーのように「早期に失敗」することができないためです。つまり、ユーザーエージェントがプロパティ値が無効であると認識する時点では、他のカスケードされた値が既に投げられているからです。
例を示します。
HTML
<p class="p1">未定義の変数</p>
<p class="p2">不正な変数</p>
<p class="p3">不正なリテラル色</p>
CSS
p {
color: red;
}
.p1 {
color: var(--invalid-color);
}
.p2 {
--invalid-color: 20px;
color: var(--invalid-color);
}
.p3 {
color: 20px;
}
結果
var() を使用している段落はデフォルトの黒に戻りますが、不正なリテラル色が指定された段落は赤のままであることに注意してください。これは color: 20px 宣言が単に無視されるためです。
仕様書
| 仕様書 |
|---|
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |
ブラウザーの互換性
関連情報
env(…)– ユーザーエージェントによって制御される読み取り専用の環境変数- CSS カスタムプロパティ（変数）
@propertyアットルール- CSS カスタムプロパティの登録
- カスケード変数のための CSS カスタムプロパティモジュール