Description
使用css自定义属性实现一键换肤功能
css自定义属性简介
css 的自定义属性功能(var), 在css中使用变量,和less及scss不同的是,在js中可以直接修改变量值;
用法: MDN
它们使用自定义属性符号（例如--main-color: black;）进行设置，并使用var()函数。
例如: color: var(--main-color);
:root {
--main-color: brown;
}
.one {
color: white;
background-color: var(--main-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
可以在javascript中设置
// get variable from inline style
element.style.getPropertyValue("--my-var");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");
// set variable on inline style
element.style.setProperty("--my-var", 'red');
浏览器支持
css自定义属性目前支持的浏览器有
使用css-vars-polyfill
polyfill
补充polyfill 的简单解释
polyfill用于表示根据新特性的定义,创建一段与之行为等价但能够在旧的javascript环境中运行的代码
引用 wiki 里的一句话解释
In web development, a polyfill is code that implements a feature on web browsers that do not support the feature. Most often, it refers to a JavaScript library that implements an HTML5web standard, either an established standard (supported by some browsers) on older browsers, or a proposed standard (not supported by any browsers) on existing browsers. Formally, "a polyfill is a shim for a browser API".
可以这样简单的理解一下:
css自定义变量在IE浏览器中无法使用,但是使用了css-vars-polyfill ,就可以让我们在IE9+中也可以使用该属性;
还记得 babel-polyfill 么, babel允许我们使用es6的语法,它主要是把es6的语法转成大多数浏览器可是支持的es5语法, 可以使用 工具 来看一下平常所写的es6语法对应到es5是什么样的, 例如
但是像 Array.from , Object.assign, Array.prototype.includes, promise, async ,await 这些都是es5语法中没有的,我们还是想使用,但是很多浏览器不支持怎么办, babel-polyfill就是帮我们解决这个问题的
