处理CSS前缀问题的神器——AutoPrefixer。AutoPrefixer官网
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。
Autoprefixer 同样会清理过期的前缀,因此下面的代码:
css 代码:
a {
-webkit-border-radius : 5px;
border-radius : 5px
}
编译成:
css 代码:
a {
border-radius : 5px
}
因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。
1.首先当然是安装node.js;
(略)
2.安装Autoprefixer,
见https://github.com/postcss/autoprefixer:
mac:
sudo npm install autoprefixer -g
要不要加sudo
,或者是不是全局安装(-g
)那就看你自己的环境了。
win:
npm install --save -dev autoprefixer
npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/
3.安装postcss-cli
Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli
ps:为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量,还会使得你的思路被打断。
网友评论