还在手动给css加前缀？no！几种自动处理css前缀的方法简介
原文首发于个人博客：还在手动给css加前缀？no！几种自动处理css前缀的方法简介
我们知道在写css的时候由于要兼容不同厂商浏览器，一些比较新的属性需要给它们添加厂商前缀来兼容。移动端还好，基本只要兼容webkit内核的即可，pc端就虐心了，ff、ie、Opera……可以说五花八门，应有尽有，每次要使用例如一些css3属性的时候，就要考虑到添加前缀兼容的问题，那么多属性那么多前缀，简直是泯灭人性！
不过好在现在各种工具的出现，已经可以很好地解决这个问题了，下面就简单介绍几个吧。
1. postcss
postcss是一个用JS插件转化样式的工具。这些插件可以检查CSS，支持变量和mixin，转译未来的CSS语法，内联图像等等……总之是一个非常强大的css处理工具。
在本文中我们主要介绍postcss里面使用率最高的一个插件Autoprefixer。Autoprefixer是专门用来添加厂商前缀的postcss插件，它处理兼容性的依据来源于caniuse。
使用效果
编译前：
.example {
display: flex;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
编译后：
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
如何使用？
使用构建工具gulp、webpack、grunt等
gulp
在gulp中，你可以安装npm包gulp-postcss来启用Autoprefixer。
var gulp = require('gulp');
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
return gulp.src('./postcss/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('./dist/postcss'));
});
webpack
在webpack中，你可以安装npm包postcss-loader来启用Autoprefixer。
var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}
grunt
在grunt中，你可以安装npm包grunt-postcss来启用Autoprefixer。
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
2.在less、sass等css预处理器中处理前缀
less
在less中可以使用mixin来解决。
例如：
.animation(@args){
-webkit-animation:@args;
-moz-animation:@args;
-ms-animation:@args;
-o-animation:@args;
animation:@args;
}
然后调用：
div{
.animation(fadeIn 1s);
}
sass
在sass中可以使用工具库compass来帮助我们。（安装compass前需要先安装Ruby，如何安装自行百度）
然后我们在sass中引入compass模块中需要的部分，然后通过@include命令调用，例如：
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
编译后结果：
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
3.css预处理搭配构建工具使用Autoprefixer更酸爽
其实我们也看出来了，在预处理中添加前缀其实还是有点麻烦的，但是在webpack等工具中同时使用它们会更为便捷，思路其实很简单，就是：先用预处理器把less、sass转为css，然后再通过Autoprefixer给编译好的css加前缀。以webpack为例：
var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /\.less$/,
loader: "style-loader!css-loader!postcss-loader!less-loader"
}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}
首先我们先用less-loader编译less为css，然后在通过postcss-loader给编译后的css加前缀，就是这么简单。
参考文章：
https://github.com/postcss/autoprefixer
