CSS自定义属性级联变量var()

全部随笔/CSS3

 

作为前端小白，热衷于前端技术，最近正在学习CSS3。前几天看见一篇文章：《必须了解的CSS变量（var）》，看见这标题就立刻被吸引了。纳尼纳尼？var不是JavaScript的关键字么，什么时候CSS也能用了？话说啥时候CSS也能声明变量了？难道不是像SASS/SCSS这样的CSS预编译器的功能么？

在阅读博文及更加深入的查阅后，写了此篇博文，以供交流。文中有多处引用原博文内容，若有侵权，请联系我速删。文末附原博文及相关引用链接。

名称

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

语法

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

  变量名称（variableName）使用规范：

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

 

1 .a{
2     --container-bg-color: #0ff;
3 }
4 div {
5   --container-bg-color: #0f0 !important;
6 }
View Code

 

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方法

 

 1 @supports ( (--size: 0)) {
 2 
 3   /* 支持 */
 4 
 5 }
 6 
 7 @supports ( not (--size: 0)) {
 8 
 9  /* 不支持 */
10 
11 }
View Code

 

2.使用JavaScript

1 if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {
2 
3   /* 支持 */
4 
5 }else{
6 
7   /* 不支持 */
8 
9 }
View Code

使用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)

 

1 var d1 = document.getElementById("d1"),
2 style1 = window.getComputedStyle(d1, ":after");
3  
4 var d2 = document.getElementById("d2"),
5 style2 = window.getComputedStyle(d2, null);
6 
7 var value = d1.getPropertyValue('--variableName');
View Code

 浏览器兼容

参考文章：

posted @ 2016-12-18 14:42  bibibobo  阅读(2870)  评论(0)  编辑  收藏  举报