这是我参与更文挑战的第28天，活动详情查看： 更文挑战

没有前言，我们直接单刀直入！

兼容性问题

以CSS3为例，聊聊我所理解的兼容性的问题

CSS又称层叠样式表，用于修饰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-

像这样一个一个查，再一个一个加前缀，是可以解决问题！但一般不会这样做，原因两个字：费劲

方法二：使用预处理器和后处理器

简单聊聊吧

预处理器 pre-processor

简单来说，预处理器就是先按照别人的规则和格式来书写代码，然后再编译成.CSS。

典型代表：lass、sass、cssNext（cssNext用于实现未来的一些标准）

后处理器 post-processor

后处理区，是先不考虑兼容性问题，按照正常格式写css样式，写完后通过后处理器处理css文件，将不兼容的属性自动添加前缀

典型代表：autoprefixer，用于自动添加前缀

因此我们可以使用预处理和后处理，来更方便的解决兼容的问题

包括后来的构建工具等如webpack都有相应的插件，来处理这种兼容性问题

以上就是本次我对兼容性问题的一些思考！有误之处，欢迎留言交流~