CSS（Cascading Style Sheets ）叫层叠样式表，用于修饰HTML文档样式；CSS3是CSS2的升级版本，由CSS权威组织在css2的基础之上新增了很多功能和标准，让各大浏览器厂商去实现。但是由于各浏览器出于各种原因，导致对各个功能的实现的时间是参差不齐的，这就导致有些浏览器先实现，有些浏览器后实现，甚至有些浏览器没实现；先实现的浏览器将已经实现的功能做个特殊的标记，表示这个功能是我的私有属性，其他浏览器用不了；而接着如果第二个浏览器也实现了这个功能，它也加一个自己的特殊标记，以此类推，到最后面所有浏览器厂商都实现了该功能。这个时候某个浏览器厂商的人可能就想到，这个功能大家都实现了那这也不算是我的私有属性了，那我就支持不加自己特殊标记的写法吧，接着第二个厂商看到，哟呵是哦大家都实现了，那我也支持不加自己特殊标记的写法，以此类推，到最后大家都支持不加自己特殊标记的写法了，这就是一个属性从开始定义到兼容一些浏览器到兼容所有浏览器的过程。这个过程，甚至到现在很多属性和功能都是在上述的发展着。
所以正是浏览器厂商对CSS3新增功能的实现时间参差不齐，导致了CSS3属性各种各样不兼容的问题。
那如何解决兼容性紊乱的问题呢？
方法一：查文档查手册
下面是两个最常用的两个网址caniuse和CSS手册：
当我们要用某个属性的时候，就去上面两个网址查找该属性的兼容性，对应你要兼容到的浏览器版本，对应的加上前缀之类的操作，如columns：
.test{
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
小结一下，各主流浏览器常加的特殊标记：
1. Safari/Chrome: -webkit-
2. IE:-ms-
3. Firefox:-moz-
4. Opera:-o-
方法二：使用后处理器比如autoprefixer插件自动补齐前缀
这里简单讲一下后处理器和预处理器
-
预处理器 pre-processor
就是先按照别人的规则和格式来书写代码，然后再编译成.CSS。
典型代表，如：lass、sass、cssNext（cssNext用于实现未来的一些标准） -
后处理器 post-processor
是先按照正常格式写css样式，不考虑兼容性问题，通过后处理器处理css文件，比如自动将不兼容的属性自动添加前缀
典型代表，如：autoprefixer
注意：cssNext和autoprefixer依赖于postCss
postCss的本质是用js实现的CSS的抽象语法树（AST : Abustract Syntax Tree）
说白了postCss就像一个插槽一样，剩下的具体事情留个其他插件来做了，cssNext和autoprefixer就是它其中的两个插件
网友评论