カスタムプロパティ (--*): CSS 変数
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Please take two minutes to fill out our short survey.
接頭辞 -- が付いたプロパティ名、例えば --example-name は、カスタムプロパティを表し、 var() 関数を用いて他の宣言の中で使用することができる値を持ちます。
カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。
| 初期値 | 本文を参照 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 変数を代入して指定した通り |
| アニメーションの種類 | 離散値 |
構文
css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>-
この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。
メモ:
カスタムプロパティ名は大文字・小文字の区別があります。 --my-color は --My-color とは別なカスタムプロパティとして扱われます。
形式文法
Error: could not find syntax for this item
例
HTML
html
<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
<div id="container">
<p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
</div>
CSS
css
:root {
--first-color: #16f;
--second-color: #ff7;
}
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
#secondParagraph {
background-color: var(--second-color);
color: var(--first-color);
}
#container {
--first-color: #290;
}
#thirdParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
結果
仕様書
| Specification |
|---|
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |