CSS 兼容性的简短介绍

浏览器兼容性的由来

1. CSS3是什么？

   是CSS2 的升级版本，带来了一些新的选择器和其他的特性，可以脱离js实现动画。

2. CSS3的兼容性的历史

   1. 属性前缀

      prefix	browser
      -webkit-	chrome & safari
      -moz-	firefox
      -ms-	ie
      -o-	opera

   2. 前缀的由来，因为标准的制定各个浏览器厂商实现需要一定的时间，各浏览器厂商实现的速度不一致，先实现的厂商为了加以区分，所以在前面加上了前缀。在一段时间后大家都实现后，浏览器厂商会支持不带前缀的属性，例如border-radius 这个属性，如今不加前缀各浏览器都能识别。

      • 参考手册：参考手册 : 最后更新与 2018 年

      • 权威查询网站：caniuse ：查询各属性在各浏览器中的兼容性实现情况

3. 扩展知识（需要在 webpack 中使用）

   1. 后处理器（post-processor）

      我们本来写的就是css代码，写完之后帮我们补充css，比如解决兼容性的代码。

      1. autoprefixer：此插件在你写完代码后，会扫描一遍，帮你检查兼容性问题，并自动添加前缀

   2. 预处理器（pre-processor）

      1. less

      2. sass

      3. cssNext

         使用此方式，需要按照指定的语法编写代码，然后less/sass帮我们解析为浏览器可执行的css

   1. cssNext & autoprefixer 基于 postCSS，postCSS ：用js实现的css的抽象语法树。postCSS 充分体现了可扩展性。

   2. 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;
       }