autoprefixer 和 cssnext

Autoprefixer
根据 Can I use 的 数据，按需给无前缀代码自动加厂商前缀。
输入：

a {
    display: flex;
}

输出：

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

cssnext
CSS 的转译器（transpiler），根据目前仍处于草案阶段、未被浏览器实现的标准把代码转译成符合目前浏览器实现的 CSS。类似 ES6 的 Babel。转译时因为也要处理前缀问题，所以直接依赖了 Autoprefixer 来做这个部分。
输入：

/* custom selectors */
@custom-selector --heading h1, h2, h3, h4, h5, h6;
--heading { margin-top: 0 }

/* filters */
.blur {
  filter: blur(4px);
}

输出：

/* custom selectors */
h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0 }

/* filters */
.blur {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
  -webkit-filter: blur(4px);
          filter: blur(4px);
}

两者都是基于 CSS 处理框架 postcss 的（postcss 就是 Autoprefixer 的作者把 Autoprefixer 从另一个 CSS 处理框架 rework 中迁移出来时搞的）。

相比之下，Autoprefixer 更加具有实用价值，而 cssnext 实现的功能以后浏览器会怎么实现还存疑，感觉只能玩玩。

 

 

作者：顾轶灵
链接：http://www.zhihu.com/question/28622861/answer/41736403