所以正是浏览器厂商对CSS3新增功能的实现时间参差不齐，导致了CSS3属性各种各样不兼容的问题。
那如何解决兼容性紊乱的问题呢？
方法一：查文档查手册
下面是两个最常用的两个网址caniuse和CSS手册：
当我们要用某个属性的时候，就去上面两个网址查找该属性的兼容性，对应你要兼容到的浏览器版本，对应的加上前缀之类的操作，如columns：
小结一下，各主流浏览器常加的特殊标记：
1. Safari/Chrome: -webkit-
2. IE:-ms-
3. Firefox:-moz-
4. Opera:-o-
方法二：使用后处理器比如autoprefixer插件自动补齐前缀
这里简单讲一下后处理器和预处理器
注意：cssNext和autoprefixer依赖于postCss
postCss的本质是用js实现的CSS的抽象语法树（AST : Abustract Syntax Tree）
说白了postCss就像一个插槽一样，剩下的具体事情留个其他插件来做了，cssNext和autoprefixer就是它其中的两个插件
预处理器就是编译css，以前css都是静态的，要写两个class就得写两个class，现在可以加入变量。预处理器会对变量做处理。后处理器就是对css加入一些扩展，增强css的兼容性。
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里，使用Can I Use的数据来决定哪些前缀是需要的。所有你需要做的就是把它添加到你的资源构建工具（例如 Grunt）并且可以完全忘记有CSS前缀这东西。尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样：
a{
transition :transform 1s
}
Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀：
a{
-webkit-transition :-webkit-transform 1s
transition :-ms-transform 1s
transition :transform 1s
}
问题
当然我们可以手写浏览器前缀，但是这显得乏味以及易错。
我们也可以使用类似Prefixr这样的服务以及编辑器插件，但这仍然乏于跟一堆重复的代码打交道。
我们可以使用象Compass之于Sass以及nib之于Stylus之类的预处理器提供的mixin库。它们可以解决绝大部分问题，但同时又引入了其他问题。
它们强制我们使用新的语法。它们迭代慢于现代浏览器，所以当稳定版发布时会产生很多不必要的前缀，有时我们需要创建自己的mixins。
Compass实际上并没有为你屏蔽前缀，因为你依然需要决定许多问题，例如：我需要为 border－radius 写一个mixin吗？我需要用逗号分割 +transition 的参数吗？
Lea Verou的-prefix-free几乎解决了这个问题，但是使用客户端库并不是个好注意，当你把最终用户性能考虑进去的话。为了防止反复做同样的事情，最好是在资源构建或者项目发布时再构建一次CSS。
揭秘
Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS而不使用特定的语法。可以轻松跟Sass以及Stylus集成，由于它在CSS编译后运行。
Autoprefixer基于Rework，一个可以用来编写你自己的CSS后处理程序的框架。Rework解析CSS成有用Javascript结构经过你的处理后导回给CSS。
Autoprefixer的每个版本都包含一份最新的 Can I Use 数据：
当前浏览器列表以及它们的普及度。
新CSS属性，值和选择器前缀列表。
Autoprefixer默认将支持主流浏览器最近2个版本，这点类似Google。不过你可以在自己的项目中通过名称或者模式进行选择：
主流浏览器最近2个版本用“last 2 versions”；
全球统计有超过1%的使用率使用“>1%”
仅新版本用“ff>20”或"ff>=20".
然后Autoprefixer计算哪些前缀是需要的，哪些是已经过期的。
当Autoprefixer添加前缀到你的CSS，还不会忘记修复语法差异。这种方式，CSS是基于最新W3C规范产生：
a {
background : linear-gradient(to top, black, white)
display : flex
}
::placeholder {
color : #ccc
}
编译成：
a {
background : -webkit-linear-gradient(bottom, black, white)
background : linear-gradient(to top, black, white)
display : -webkit-box
display : -webkit-flex
display : -moz-box
display : -ms-flexbox
display : flex
}
:-ms-input-placeholder {
color : #ccc
}
::-moz-placeholder {
color : #ccc
}
::-webkit-input-placeholder {
color : #ccc
}
::placeholder {
color : #ccc
}
Autoprefixer 同样会清理过期的前缀（来自遗留的代码或类似 Bootstrap CSS库），因此下面的代码：
a {
-webkit-border-radius : 5px
border-radius : 5px
}
编译成：
a {
border-radius : 5px
}
因为经过Autoprefixer处理，CSS将仅包含实际的浏览器前缀。Fotorama从Compass切换到Autoprefixer之后，CSS大小减少了将近20%。
