自定义属性 (--*)

自定义的CSS属性变量名称须有前缀‘--’，比如‘--example--name’。一个赋值的自定义CSS属性变量可以通过var()方法来复用。

CSS自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

语法

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);


<declaration-value>: 这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。

正式语法

<declaration-value>

举例

HTML Content

<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
  <p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
</div>

CSS Content

: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);
}

Result

参考文档

Specification	Status	Comment
CSS Custom Properties for Cascading Variables Module Level 1 --*	Working Draft	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	48.0^[1] 49.0	未实现	29.0 (29.0)^[2] 31.0 (31.0)	未实现	36.0	9.3^[3]

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	50.0	29.0 (29.0)	未实现	37.0	9.3^[3]

[1] Chrome 48 enabled through the "Experimental Web Platform features" flag in chrome://flags.

[2] In Gecko 29.0 (Firefox 29.0 / Thunderbird 29.0 / SeaMonkey 2.26) this feature is implemented behind the preference layout.css.variables.enabled, defaulting to false and using the old var-variablename syntax. Starting from Gecko 31.0 (Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28) the preference is set to true by default and the new --variablename syntax is used.

[3] See WebKit bug 19660.

其他

Using CSS variables