解决css3兼容各个浏览器的前缀的方案
emmet生成
用编辑器插件: 如sublime text 的 autoprefixer自动添加兼容前缀 基于nodejs 需要安装nodejs (这个效果不佳,本人测试貌似只添加-webkit-的前缀 - -)
用grunt插件 grunt-autoprefixer 参考链接:http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html
引入js<script src=”http://leaverou.github.com/prefixfree/prefixfree.min.js”></script>
Webstorm中使用Autoprefixer插件补充浏览器前缀
npm install grunt --save-dev
npm install autoprefixer --save-dev
npm install postcss-cli --save-dev
打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮
填写具体配置
name:autoprefixer
Program:D:\mycode\driveRepertory\node_modules\.bin\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory $ProjectFileDir$
配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer;
配置快捷键
配置兼容性
https://github.com/postcss/autoprefixer
https://github.com/browserslist/browserslist