CSS自定义属性变量

如何定义自定义属性

1. 自定义属性名

CSS 自定义属性的语法格式为 --*，双横线加上具体的自定义属性名，属性名是一个合法的 CSS 标识符即可。
自定义属性没有具体的 CSS 含义，其用途完全由我们自己决定。自定义属性可以应用于任何元素，其可以被继承，并且支持级联，不支持动画。

注意：与 CSS 属性不同，自定义属性是大小写敏感的。

CSS 不会被 all 属性重置，将来可能会定义一个重置所有变量的属性。

2. 自定义属性值

自定义属性值的要求可以说是非常地宽松，可以是任何有效的 CSS 值，如颜色、字符、布局的值、甚至是表达式。

既然自定义属性值的要求如此宽松，那我们只需要知道有哪些情况不允许即可。

只要自定义属性值不存在以下几种情况即为合法：无效字符值、无效 url 值、未配对的 ) / ] / }，不能在最外层出现 ;，不能出现 !。

有个例外，自定义属性后面可以跟 !important，但是添加的 !important 无效，因为在进行属性值检测前就会被移除。

3. 例子🌰

css 复制代码

/* 根伪类 :root， 可以在HTML文档的任何地方访问到 */
:root { 
    --main-color: red; 
    --bg-color: pink; 
    --main-font-size: 15px; 
}
span { 
    --color: green;
}
.test{ 
    color: var(--main-color);
}

自定义属性备用值

用 var() 函数可以定义多个备用值（fallback value），当给定值未定义时将会用备用值替换

css 复制代码

.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}

.three {
  background-color: var(
    --my-var,
    --my-background,
    pink
  ); /* Invalid: "--my-background, pink" */
}

在JavaScript中修改自定义变量

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

js 复制代码

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

兼容性处理

可以使用 @support 命令进行检测。

css 复制代码

@supports ( (--a: 0)) {
  /* support */
}

@supports ( not (--a: 0)) {
  /* not support */
}

对于不支持 CSS 变量的浏览器，可以采用下面的写法。

css 复制代码

a {
  color: #7F583F;
  color: var(--primary);
}