这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。
CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。
| 初始值 | see prose |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 适用媒体 | all |
| 计算值 | as specified with variables substituted |
| Animation type | discrete |
| 正规顺序 | per grammar |
-
语法
--somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>- 这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。
正式语法
<declaration-value>
示例
HTML
<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
: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.