这几年随着iOS和Android设备的发展,WEB技术发展也真是挺快的。连万年不变的的CSS也是新概念频出。关于布局的Flex和Grid自不必说,连变量这种CSS预处理语言的关键部件,也直接原生支持了。而且主流的浏览器还都支持的不错,算上换了webkit内核和IE,基本上都不用太过虑浏览器兼容性问题了。
CSS变量的基本规则
- 变量定义使用两个中划线开头:
--
。 - 变量有作用域,类似CSS选择器的作用范围,上下级的作用域内变量可以重新赋值。
- 最高的作用域推荐使用
:root
伪CSS类,这样基本上就是在定义全局变量了。 - 变量通过关键字
var()
来在书写CSS属性的时候使用,var()
接受两个参数,第一个是变量名,第二个是变量不存在的时候的默认值。 - 使用
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可以定义页面的安全可视区域。
参考:
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- https://developer.mozilla.org/en-US/docs/Web/CSS/env