厂商前缀是神马？

对于一些 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 预处理功能。

最后，下面这些老方案大家就不要用了