PostCSS: 跨浏览器兼容性

PostCSS工具

如果你不想从头开始手动设置您的项目，你可以下载本教程中提供的源码附件，提取Gulp或Grunt项目到一个空的文件夹中。

然后在命令终端运行：npm install。

安装插件

不管你是使用Gulp还是Grunt，在你项目的目录下运行下面的命令：

npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

现在已经安装好插件了，下面我们继续将这些插件加载到您的项目中。

通过Gulp加载插件

如果你使用的是Gulp，在你的gulpfile.js加载这些变量：

var autoprefixer = require('autoprefixer');
var color_rgba_fallback = require('postcss-color-rgba-fallback');
var opacity = require('postcss-opacity');
var pseudoelements = require('postcss-pseudoelements');
var vmin = require('postcss-vmin');
var pixrem = require('pixrem');
var will_change = require('postcss-will-change');

并且将这些变量的名称添加到你的processors数组中：

var processors = [
    will_change,
    autoprefixer,
    color_rgba_fallback,
    opacity,
    pseudoelements,
    vmin,
    pixrem
];

做一个快速测试，在命令终端运行gulp css，检查style.css文件有没有放到dest文件夹中。

【参考文章1】

【参考文章2】

package.json 代码：

{
  "name": "gulppostcssstarter",
  "version": "1.0.0",
  "description": "Basic starter project for PostCSS use via Gulp",
  "author": "Kezz Bracey",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^5.2.0",
    "gulp": "^3.9.0",
    "gulp-postcss": "^5.1.10",
    "pixrem": "^1.3.1",
    "postcss-color-rgba-fallback": "^1.3.1",
    "postcss-opacity": "^2.0.1",
    "postcss-pseudoelements": "^2.2.0",
    "postcss-vmin": "^1.0.0",
    "postcss-will-change": "^0.2.0"
  }
}

gulpfle.js的配置：

var gulp = require('gulp');
var postcss = require('gulp-postcss');

var autoprefixer = require('autoprefixer');
var color_rgba_fallback = require('postcss-color-rgba-fallback');
var opacity = require('postcss-opacity');
var pseudoelements = require('postcss-pseudoelements');
var vmin = require('postcss-vmin');
var pixrem = require('pixrem');
var will_change = require('postcss-will-change');

gulp.task('css', function () {
    var processors = [
        will_change,
        autoprefixer({
            browsers: ['> 1%','last 2 versions', 'ie >=8', 'Firefox > 20', 'Chrome > 31']
        }),
        color_rgba_fallback,
        opacity,
        pseudoelements,
        vmin,
        pixrem
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});