CSS变量的历史和兼容性

CSS变量的历史

自1998年5月起，Web社区就有要求css定义变量的方法，在我看来，这是很正常的，一个新的功能不可能是一时的冲动，拍拍屁股就决定的，它需要的是不断的检测，不断的改正，时间是最公正的裁判不是吗？

2011年2月，css变量草案被提出，它最初受到Dave Hyatt和Daniel Glazman最初编写的变量提案的启发，后经过一系列的讨论及改正，至2014年5月，CSS变量草案快速的成长起来，变的更加的健壮。

CSS变量的声明

首先你需要制定变量的作用域，全局或者是局部，其次你需要使用--充当变量前缀，就像sass的$和lass的@，它们的用法相差不大。注意，CSS变量对大小写敏感，变量的值可以是颜色、字符串、多个值的组合等。

:root{
    --colorText:blue;
    --textContent:"Hello";
    --varG:var(--colorText);
    --number:10;
}
#body{
    --only:green;
}
#body{

    /*var()用于读取变量，var()可以有两个参数，第二个为默认值（可选），即变量失效后使用的值*/
    color:var(colorText,green)；
    
    /*变量是数字，在涉及单位的时候，不能直接使用，需要calc()进行转换，单位不能作为字符串存储*/
    width:calc(var(--number) * px)
}

CSS变量的优先级

当css变量在多个选择器内进行声明的时候，读取的时候，优先级最高的生效，优先级规则参照css层叠规则
就个人建议，变量应尽量 :root 作用域下进行声明，便于后来者的样式维护

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

CSS变量在响应式的应用

在依靠媒体查询的响应式的时候，

body {
    --colorText: red;
}

@media screen and (min-width: 768px) {
    body {
        --colorText: red;
    }
}

CSS变量在其他方面的应用

就像阮一峰大佬说的那样，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。途径有很多，目的却只有一个，简化操作，强化功能，

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

CSS变量的兼容性表现

由于国内和国外的社会环境和web环境的不同，导致CSS变量在国内出现了尴尬的局面，使得CSS变量在某种程度上成为了食之无味，弃之可惜的“鸡肋”。在功能性方面，它比不上Sass，less已及stylus，在兼容性方面，微软在2017年3月宣布，Edge 浏览器将支持 CSS 变量。然而国内公司虽然大多数已经不要求兼容IE9以下的IE浏览器，但是 IE9+
依然不支持CSS变量

CSS样式的兼容性的办法也是有的，你可以像下面这样写

div{
    color:red;
    /*如果都这样写了，那这还有什么意义，我为什么要写下面这个*/
    --divColor:red;
    color:var(--divColor);
}

/*使用CSS3的功能查询*/
@supports ( (--a: 0)) {
  /* 兼容 */
}

@supports ( not (--a: 0)) {
  /* 不兼容 */
}

JavaScript检测兼容性

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  console.log('兼容')
} else {
  console.log('不兼容')
}

规则：CSS自定义属性文档

总结：就目前而言，在国内的环境之下，使用CSS变量有些鸡肋的表现，当然，仁者见仁智者见智，这只是我个人的想法

CSS变量的历史和兼容性