码迷,mamicode.com
首页 > Web开发 > 详细

autoprefixer 和 cssnext

时间:2015-11-06 17:39:42      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:


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

autoprefixer 和 cssnext

标签:

原文地址:http://www.cnblogs.com/rhett-web/p/4942976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!