兼容性
CSS3为我们提供了一个强大的功能自定义属性,也就是变量,他能让我们更改色系、皮肤、自适配变得简单。
查看兼容性
https://caniuse.com/?search=--
可以看出94%的用户的浏览器都兼容这个新特性了。
定义使用
变量的定义使用--name
,而变量的调用使用var(--name)
。
示例
1 | /* 定义全局变量 */ |
其中
:root
定义的是全局的变量。
项目示例:
效果
代码:
1 | :root{ |
变量作用域
作用域
在全局和布局同时定义了一个变量,会优先应用局部作用域。
优先级
CSS获取变量和CSS的样式优先级一样
顺序是:
!important
>style=""
>#id
>.class
>tagName
>:root
;
JS操作变量
1 | // 获取行内样式的变量名 |
检测是否支持变量
CSS检测:
通过@supports性能查询语法来检测
语法:
1 | @supports (--a: 0){ |
JS语法检测:
1 | const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); |