自定义属性 (--*)

这篇翻译不完整。请帮忙从英语翻译这篇文章

自定义的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.

其他

文档标签和贡献者

 此页面的贡献者: yisibl, Huooo
 最后编辑者: yisibl,