使用CSS变量,或者叫CSS定制属性

使用CSS变量,或者叫CSS定制属性

这几年随着iOS和Android设备的发展,WEB技术发展也真是挺快的。连万年不变的的CSS也是新概念频出。关于布局的Flex和Grid自不必说,连变量这种CSS预处理语言的关键部件,也直接原生支持了。而且主流的浏览器还都支持的不错,算上换了webkit内核和IE,基本上都不用太过虑浏览器兼容性问题了。

CSS变量的基本规则

  1. 变量定义使用两个中划线开头:--
  2. 变量有作用域,类似CSS选择器的作用范围,上下级的作用域内变量可以重新赋值。
  3. 最高的作用域推荐使用:root伪CSS类,这样基本上就是在定义全局变量了。
  4. 变量通过关键字var()来在书写CSS属性的时候使用,var()接受两个参数,第一个是变量名,第二个是变量不存在的时候的默认值。
  5. 使用var()时如果变量不存在,也没有提供第二个变量,浏览器会使用从父元素继承过来的属性值或者浏览器缺省值。

通过JavaScript操作CSS变量

获得DOM元素的内联CSS变量(inline style):
element.style.getPropertyValue("--my-var");

获得DOM元素的有效CSS变量(computed style),不管这个变量是不是在当前元素定义的:
getComputedStyle(element).getPropertyValue("--my-var");

在DOM元素上设置一个CSS变量:
element.style.setProperty("--my-var", jsVar + 4);

不要与CSS环境变量混淆:var() vs env()

var()是用了使用用户自定义的CSS变量的关键字。

env()是用来使用浏览器在不同的环境中,例如特别的手机设备上,定义的环境变量。所以env()就是全局的,没有作用域概念了。
比如iOS设备有一组safe-area-inset-*环境变量,使CSS可以定义页面的安全可视区域。

参考:

leon

每天进步一点点