名称

开始时被叫做“CSS变量”
经过扩展和重构后,改为“CSS自定义属性”
CSS增加@apply规则后,名称变为“CSS自定义属性级联变量”
语法

1.定义语法:--variableName: value;

变量名称(variableName)使用规范:

以"--"开头,后面可以是数字、字母、下划线、连字符、汉字等,但不能包含$、[、^、(、%等字符
大小写敏感(另:CSS中,书写属性名时大小写不敏感,但是书写选择器时大小写敏感)
定义只能出现在块{}内
可以使用!important修饰
作用域就是选择器的选定范围,作用域出现交叉时,同名变量覆盖规则取决于选择器权重

.a{

 --container-bg-color: #0ff;

}
div {
--container-bg-color: #0f0 !important;
}

2.使用语法:cssPropertyName: var(--variableName[,declarationValue]);

declarationValue:仅限于当--variableName变量未定义时的备用选项
val()只能被引用,不能被赋值。即只能出现在":"右侧
不能用作地址,如:url(var(--url));
var()后面默认带有一个空格,因此在其后面加单位无效,如:
--size: 20; font-size: var(--size)px;

会解析成font-size: 20 px;注意此时“20”与“px”之间有个空格,导致该语句无效。单位应在定义时加上,如:

--size: 20px; font-size: val(--size);

检查浏览器支持

1.使用@supports方法

@supports ( (--size: 0)) {

/* 支持 */

}

@supports ( not (--size: 0)) {

/ 不支持 /

}

2.使用JavaScript

if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {

/ 支持 /

}else{

/ 不支持 /

}
使用JavaScript操作原生属性变量

window.getComputedStyle(element, '伪类'|null):[IE9+,Firefox,Chrome,Safari, Opera]获得当前元素最终使用的所有CSS属性值,返回一个只读CSS样式声明对象。
window.getComputedStyle(element, '伪类'|null).getPropertyValue('propertyName')
window.getComputedStyle(element, '伪类'|null).setProperty('propertyName', value)

var d1 = document.getElementById("d1"),
style1 = window.getComputedStyle(d1, ":after");

var d2 = document.getElementById("d2"),
style2 = window.getComputedStyle(d2, null);

var value = d1.getPropertyValue('--variableName');
本文转载自:https://www.cnblogs.com/bibibobo/p/6140659.html

标签: none

添加新评论