浏览器兼容性的由来
-
CSS3是什么?
是CSS2 的升级版本,带来了一些新的选择器和其他的特性,可以脱离js实现动画。
-
CSS3的兼容性的历史
-
扩展知识(需要在 webpack 中使用)
-
后处理器(post-processor)
我们本来写的就是css代码,写完之后帮我们补充css,比如解决兼容性的代码。
-
autoprefixer:此插件在你写完代码后,会扫描一遍,帮你检查兼容性问题,并自动添加前缀
-
-
预处理器(pre-processor)
-
less
-
sass
-
cssNext
使用此方式,需要按照指定的语法编写代码,然后less/sass帮我们解析为浏览器可执行的css
-
-
cssNext & autoprefixer 基于 postCSS,postCSS :用js实现的css的抽象语法树。postCSS 充分体现了可扩展性。
-
cssNext 语法预览
:root{ --my-color: #f40; // 定义一个变量,名字为“--my-color” } // 打包选择器到 --healine @custom-selector: --my-selector h1,h2,h3,h4,h5,h6; :--my-selector { color:var (--my-color); // 通过 var 来引用变量 } -------生成下面的样子------- h1,h2,h3,h4,h5,h6{ color: #333; }
-