autoprefixer 和 cssnext 分别有什么用处？有什么区别

html-css010

autoprefixer 和 cssnext 分别有什么用处？有什么区别,第1张

Autoprefixer顾名思义，这是一个根据你需要兼容的浏览器版本来自动增加前缀的工具，Options: 中填写 >0% 可以输出所有前缀，实际项目中推荐填写具体的浏览器版本，比如我常用的配置是：

const browserOptions = {

'last 3 versions',

'ie >= 10',

'ie_mob >= 10',

'ff >= 30',

'chrome >= 34',

'safari >= 6',

'opera >= 12.1',

'ios >= 6',

'android >= 4.4',

'bb >= 10', 'and_uc 9.9',

绝大多数项目我们已经可以抛弃 -moz-, -ms-, -o- 前缀了。

cssnext 这是一个面向未来的 CSS 语法转译工具，其实现的所有功能大部分都是有 W3C 草案的。但实际上很多功能不是太好用，比如 #rrggbbaa 这个 CSS Color L4 中定义的十六进制半透明色值，写个 rgba(0, 0, 0, 0.5) 还得转换为 #00000080。

功能大致就是官网列举的这些：

&ltimg src="https://pic2.zhimg.com/50/9503dabcae38999b12adc0efee365bc5_hd.png" data-rawwidth="636" data-rawheight="316" class="origin_image zh-lightbox-thumb" width="636" data-original="https://pic2.zhimg.com/9503dabcae38999b12adc0efee365bc5_r.png"&gt

Autoprefixer 和 cssnext 都是 PostCSS 的插件，而 cssnext 中引入了Autoprefixer 而已。

scss 支持cssnext：

这些甜甜圈的最终都是解析还原成css的。

举个简单例子，比如我用php或js做了个css语法糖，里面你可以这样写：

#test1 to 3{fn:12px}

你把文件保存为*.ecss，然后我写的程序遇到ecss后缀文件就会去处理成：

#test1{font-size:12px}

#test2{font-size:12px}

#test3{font-size:12px}

最终把上面3行标准的css语法返回给浏览器。

优势也没多大，就是写的时候能省些事，用这些玩意坏处也多，首先是你网站比直接用css多一个解析还原的过程，不管你把这个放在后台还是前台完成都会多耗费点时间。第二，一个语法糖的学习成本是存在的，如果不是有专门规范的团队集团使用的话，比如你不会，你去接手一个别个用这个玩意写的项目，维护就很不方便，同理你会，你写的项目别人再接手也很烦的。

另外据老外的文章说w3c也在参考这些语法糖的优势，下一个版本的css原生的会自带很多类似的功能。