目录
1、CSS变量是什么?
CSS变量,即CSS variable。官方的名称是级联变量的CSS自定义属性,即CSS custom properties for cascading variables 。通过两根连词线( -- )声明CSS变量(如:--footer-color: blue;),由var()函数获取值(如:background-color:var(--footer-color);)。适当的使用CSS变量可以使得代码更易于阅读、管理和维护,因为看起来随意的、固定的值有了一个变量名作为提示信息。就如上面的代码一眼就能看出是设置页脚背景色为蓝色,后面如果需要修改页脚背景色只需修改--footer-color的值即可。
2、CSS变量和预处理器中的变量有什么不同?
CSS变量是运行在浏览器中的动态CSS属性,而预处理器变量会被编译成普通的CSS代码。
- 浏览器原生特性,无需经过任何转译就可直接运行
- DOM对象一员,极大便利了CSS与JS之间的联系
- CSS变量不同于预处理器变量,css变量只能用于属性值,不能用于属性名
3、使用CSS变量
1、声明css变量
声明一个css变量,变量名要以两根连词线(--)开始,变量值则可以是任何有效的CSS值,CSS变量写在规则集{}之内,如下:
body{
--main-bg-color: black; /**声明一个变量名为--main-bg-color,变量值为black的CSS变量*/
}
同时CSS变量是大小写敏感的,--Main-bg-color和--main-bg-color 是两个不同的css变量。
- 属性名可以包含数字,字母,以及下划线或者短横线,也可以是中文,日文或者韩文
2、读取CSS变量
var()函数用于读取变量
var(第一个参数,第二个参数),第一个参数是CSS变量,第二个参数是可选的,表示默认值
body{
--main-bg-color: black; /**声明一个变量名为--main-bg-color,变量值为black的CSS变量*/
background-color:var(--main-bd-color);/**读取变量--main-bd-color的值 */
}
var()函数还可以使用第二个参数,表示变量的默认值。如果该变量未声明、未赋值,就使用这个默认值
body{
--main-bg-color: black; /**声明一个变量名为--main-bg-color,变量值为black的CSS变量*/
background-color:var(--main-bg-color,#FFFFFF);
/**读取变量--main-bg-color的值 ,
如果变量--main-bg-color只声明了变量名、未设置变量值,或者忘记声明该变量时,浏览器就会使用var()的第二个参数作为背景色*/
}
CSS变量备用值,通过把var()函数作为var()函数的第二个参数,可以设置多个备用值,例如:
.two {
color: var(--my-var, red); /* 如果--my-var 未定义,则color为红色 */
}
.three {
background-color: var(--my-var, var(--my-background, pink)); /* 如果--my-var,--my-background未定义,则background-color为pink */
}
.three {
background-color: var(--my-var, --my-background, pink); /* 这种写法是无效的,var()函数只能存在两个参数 */
}
2、CSS变量在拼接计算中引用
如果变量都是字符串,可以直接拼接
:root{
--text-one:'hello';
--text-two:'world'
}
.box:after{
content: var(--text-one)' 'var(--text-two);
}
变量和单位不能直接拼接
:root{
--size-one:14;
}
.box{
font-size:var(--size-one)px; /**无效**/
}
计算结果将是
font-size: 14 px;
由上可知,变量和单位直接拼接会多出一个空格,正确的拼接方式是借用calc()函数,进行计算
{font-size:calc(var(--size-one)*1px);}
当然,calc也可以用作CSS变量值当中
{--size-two:calc(20px * 2);}
也可以在CSS变量中使用另一个CSS变量
body{
--top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));
}
3、CSS变量有效性
在没有CSS变量以前,CSS有效性和属性是绑定的,但这对CSS变量来说并不适用,因为当CSS变量被解析,浏览器不知道它们什么时候会被使用,所以会默认这些值都是有效的。而且通过var()函数调用时,也要根据上下文环境确定是否有效。
当CSS属性-值对中存在语法错误,该行则会被忽略。然而如果自定义属性的值无效,它并不会被忽略,从而会导致该值被覆盖为默认值。
- 优先级别:
内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
常见默认值:
background
默认值是transparent
width
默认值是auto
position
默认值是static
opacity
默认值是1
display
默认值是inline
4、CSS变量兼容性
虽然现在主流浏览器都已支持css变量,但顽强的 ie11仍未支持,所以为了代码的健壮性,需要检测一下当前浏览器对css变量是否支持。
1、@supports命令
@supports ( (--a: 0)) {
/** 支持css变量字体为蓝色**/
section{
--my-color:blue;
color:var(--my-color);
}
}
@supports ( not (--a: 0)) {
/* 不支持css变量字体为灰色 */
section{
color:gray;
}
}
2、使用具有虚拟查询条件(dummy conditional query)的@supports
代码块
section {
color: gray;
}
@supports(--css: variables) {
section {
--my-color: blue;
color: var(--my-color, 'blue');
}
}
3、JS检测是否支持
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--masterColor', 'red');
if (isSupported) {
/* supported */
console.log('当前浏览器支持CSS变量')
} else {
/* not supported */
console.log('当前浏览器不支持CSS变量')
}
5、JS获取修改CSS变量
1、获取css变量
getPropertyValue()获取CSS变量
document.documentElement.style.getPropertyValue('--testColor')
注意:上面语句只能获取到内联样式的css变量值,要想获取任意位置的CSS变量可以使用下面方法
getComputedStyle(document.documentElement).getPropertyValue('--testcolor')
获取某一标签上的css变量
var divEle=document.querySelector('div');
var divSty=window.getComputedStyle(divEle);
var diveleVal=divSty.getPropertyValue('testcolor');
上面代码展示了获取定义在div标签中testcolor变量的值。
2、setProperty()修改css变量
document.documentElement.style.setProperty('--testcolor', color);
上面代码展示了修改属性名为 testcolor的值。需要注意的是当定义了多个同名css变量,在对变量值修改时需要指明具体修改变量,代码如下
body{
--testcolor:red;
}
div{
--testcolor:black;
}
document.querySelector('div').style.setProperty('--testcolor', yellow);
上述代码把div里的testcolor值修改成了黄色,因为body,div有同名css变量testcolor,所以在修改的指明了只修改div里的。
2、注意事项
1.document.querySelector(':root') === document.documentElement
2.优先级: js设置值>内联样式>:root选择器>html选择器
3.document.documentElement.style.getPropertyValue只能获取内联样式的值,而且document.documentElement.style.setProperty('--rect', '7px');方式设置CSS变量会添加到内联样式中去
如果CSS变量不是内联样式定义,document.documentElement.style.getPropertyValue就获取不到
4.getComputedStyle(document.documentElement).getPropertyValue获取到的始终是实际的值
5.四种方式赋值时,如果值包含多个空格,都是总会把多余空格变成一个空格。应该是类似于html页面的元素会把多余空格变成一个空格。