CSS自定义属性级联变量var()

.referenceLink { text-decoration: none !important; font-size: 16px !important; color: hsl(200, 100%, 50%) !important }
.referenceLink:hover,.notReferenceLink:hover { color: hsl(240, 100%, 50%) !important }
.notReferenceLink { color: inherit !important; text-decoration: none !important; border-bottom: 1px dotted #000 !important }
.keyword { color: hsl(0, 100%, 50%) !important }

全部随笔/CSS3

在阅读博文及更加深入的查阅后，写了此篇博文，以供交流。文中有多处引用原博文内容，若有侵权，请联系我速删。文末附原博文及相关引用链接。

名称

• 开始时被叫做“CSS变量”
• 经过扩展和重构后，改为“CSS自定义属性”
• CSS增加@apply规则后，名称变为“CSS自定义属性级联变量”

语法

1.定义语法：--variableName: value;

变量名称（variableName）使用规范：

• 以"--"开头，后面可以是数字、字母、下划线、连字符、汉字等，但不能包含$、[、^、(、%等字符
• 大小写敏感（另:CSS中，书写属性名时大小写不敏感，但是书写选择器时大小写敏感）
• 定义只能出现在块{}内
• 可以使用!important修饰
• 作用域就是选择器的选定范围，作用域出现交叉时，同名变量覆盖规则取决于选择器权重

1 .a{
2     --container-bg-color: #0ff;
3 }
4 div {
5   --container-bg-color: #0f0 !important;
6 }

2.使用语法：cssPropertyName: var(--variableName[,declarationValue]);

• declarationValue：仅限于当--variableName变量未定义时的备用选项
• val()只能被引用，不能被赋值。即只能出现在":"右侧
• 不能用作地址，如：url(var(--url));
• var()后面默认带有一个空格，因此在其后面加单位无效，如：

--size: 20; font-size: var(--size)px;

会解析成font-size: 20 px;注意此时“20”与“px”之间有个空格，导致该语句无效。单位应在定义时加上，如：

--size: 20px; font-size: val(--size);

检查浏览器支持

1.使用@supports方法

 1 @supports ( (--size: 0)) {
 2
 3   /* 支持 */
 4
 5 }
 6
 7 @supports ( not (--size: 0)) {
 8
 9  /* 不支持 */
10
11 }

2.使用JavaScript

1 if(window.CSS && window.CSS.supports && window.CSS.supports(‘--size‘, 0)) {
2
3   /* 支持 */
4
5 }else{
6
7   /* 不支持 */
8
9 }

使用JavaScript操作原生属性变量

• window.getComputedStyle(element, ‘伪类‘|null)：[IE9+，Firefox，Chrome，Safari, Opera]获得当前元素最终使用的所有CSS属性值，返回一个只读CSS样式声明对象。
• window.getComputedStyle(element, ‘伪类‘|null).getPropertyValue(‘propertyName‘)
• window.getComputedStyle(element, ‘伪类‘|null).setProperty(‘propertyName‘, value)

1 var d1 = document.getElementById("d1"),
2 style1 = window.getComputedStyle(d1, ":after");
3
4 var d2 = document.getElementById("d2"),
5 style2 = window.getComputedStyle(d2, null);
6
7 var value = d1.getPropertyValue(‘--variableName‘);

 浏览器兼容

参考文章：

• 必须了解的CSS变量（var）
• 深入学习CSS自定义属性（CSS变量）