Shockingly I’ve managed to write 3 posts about PostCSS (1, 2, 3) and not yet mention the truly amazing autoprefixer plugin.  This is easily the most popular plugin, and used by the likes of Twitter, so well worth checking out.

Essentially what it does is allow you to write your CSS without using (or even thinking about) any vendor prefixes.  When your CSS is processed by this plugin, it uses data from Can I Use and your specified supported browser list and then adds any prefixes which are required to support those browsers.

This means that you can write clean, clear CSS without having to worry about which prefixes are required these days, or going back through all those prefixes that you added years ago to see if they are still required, or worse yet, leaving them in your stylesheet indefinitely when they are no longer required.

So we need to install this modern miracle…

npm install --save-dev autoprefixer

And then we need to make sure that we include the plugin…

var prefixer = require("autoprefixer");

And finally we can add it to the CSS task that we had in the previous post…

var css = function() {
  return gulp.src(cssFiles)
    .pipe(postcss([
      partials({prefix:"_",extension:".css"}),
      cssnext(),
      prefixer()
    ]))
    .pipe(gulp.dest("build/css"));
};

And there you go, prefix bliss.  No more worrying about different vendor prefixes and no more unnecessary code bloat.