厂商前缀是神马?
2016年2月5日

什么是厂商前缀?

对于一些 CSS 的比较新的属性,由于还没有标准化,所以在很多浏览器中,如果不加厂商前缀是不会生效的。MDN 上有 Vendor Prefix 的详细说明。

最常用的厂商前缀是下面四个:

-webkit- (Chrome, newer versions of Opera.)
-moz- (Firefox)
-o- (Old versions of Opera)
-ms- (Internet Explorer)

加厂商前缀的目的是什么?

一句话:提高浏览器兼容性。

不要试图记住 vendor prefix

第一,很复杂,以 flexbox 为例子,由于历史上对它的基本用法有过两次改版,所以就会使得最终需要添加的厂商前缀非常诡异:

.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

第二,添加规则也是随时再变的。同一款浏览器,老版本中需要,但是新版本中就不需要加前缀了,例如 caniuse#flex

autoprefixer 就是最佳解决方案

针对上面的问题,autoprefixer 可以帮我们做到自动添加厂商前缀,同时添加规则就遵循 caniuse 的数据库,而这个数据库是随时有人随时更新的。

另外,根据自己项目需求,autoprefixer 还可以让我们自己制定要支持的浏览器版本,例如

ie >= 11,last 3 versions,> 2%

具体上面的每个参数的意义,可以参考这里

使用 autoprefixer 方式多多,半自动化的有 codepenautoprefixer 在线工具 。如果使用命令行,就可以全自动化完成了,例如使用 gulp-autoprefixer 或者 Meteor/Rails 等各种框架中的 autoprefixer 预处理功能。

多年前的老方案大家就不要用了

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

结语

更多信息可以参考:CSS-Tricks 上的 autoprefixer 的文章