| title |
|---|
厂商前缀是神马？ |
对于一些 CSS 的比较新的属性，由于还没有标准化，所以在很多浏览器中，如果不加厂商前缀是不会生效的。MDN 上有 Vendor Prefix 的详细说明。
最常用的厂商前缀是下面四个：
-webkit- (Chrome, newer versions of Opera.)
-moz- (Firefox)
-o- (Old versions of Opera)
-ms- (Internet Explorer)
一句话：提高浏览器兼容性。
第一，很复杂，以 flexbox 为例子，由于历史上对它的基本用法有过两次改版，所以就会使得最终需要添加的厂商前缀非常诡异：
.example {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
第二，添加规则也是随时再变的。同一款浏览器，老版本中需要，但是新版本中就不需要加前缀了，例如 caniuse#flex 。
针对上面的问题，autoprefixer 可以帮我们做到自动添加厂商前缀，同时添加规则就遵循 caniuse 的数据库，而这个数据库是随时有人随时更新的。
另外，根据自己项目需求，autoprefixer 还可以让我们自己制定要支持的浏览器版本，例如
ie >= 11,last 3 versions,> 2%
具体上面的每个参数的意义，可以参考这里 。
使用 autoprefixer 方式多多，半自动化的有 codepen 和 autoprefixer 在线工具 。如果使用命令行，就可以全自动化完成了，例如使用 gulp-autoprefixer 或者 Meteor/Rails 等各种框架中的 autoprefixer 预处理功能。
最后，下面这些老方案大家就不要用了
更多信息可以参考：CSS-Tricks 上的 autoprefixer 的文章 。