Auto–prefixing in CSS

Vendor prefixes are, if you swing that way, a useful part of CSS. Some people hate them but those people probably still use IDs in their CSS and think BEM is a porn genre. What isn’t great about vendor prefixes is that they’re experimental, temporary by nature, and are often misused by lazy developers. That’s not a fabrication, I’ve seen some git repos that’d make your nipples invert. If they aren’t already, you freak.

As with any experimental technology, care needs to be used with vendor prefixes. Something I’ve seen and done in the past is just using ‘-webkit-‘ prefixes while I mock my designs up, safe in the knowledge that I’ll remember before launch to tidy that all up and make it sexy in other browsers too. Yes, I was a stupid quim. Yes, I did forget. This is a shitty way to write CSS.

A not shitty way to write CSS would be to just write the unprefixed properties and stop cluttering your files with shity, repeated code. Repeated code is, for many reasons, fucking dumb.


-webkit-animation: lick-my-face 3s infinite;
-moz-animation: lick-my-face 3s infinite;
-o-animation: lick-my-face 3s infinite;
-netscape-animation: lick-my-face 3s infinite;
-youre-not-my-real-dad-animation: lick-my-face 3s infinite;
animation: lick-my-face 3s infinite;

If my animation is too fast/slow, there’s 6 fucking lines to change. Who wants to do that kind of monumental task? Not this guy, I’ve got drugs to take.

There is, of course, the preprocessor mixin solution. Where instead of writing your CSS normally, you write a mixin that takes different parameters and spits out all the prefixed code you need.


@mixin animation($animation) {
  -webkit-animation: $animation;
  -o-animation: $animation;
  …
  animation: $animation;
}

This is nicer, but still a pain in the arse. Mixins are very useful, but I never try and use them for things like this, it’s just convoluted.

The holy grail of dealing with this shit is auto–prefixing. Auto–prefixing is, as the name suggests, the automatic prefixing of newer or experimental CSS properties. Great news for us lazy fuckers. This lets us write normal CSS like a normal person but still keep those fantastic, hipster–friendly experimental features, so your loading indicator can bounce like a mad shit and your navigation can fade in and out like your attention span.

Auto–prefixing is made easier by build tasks. I use gulp as a task runner. This was an arbitrary decision, you can use whatever you want, but I’m going to explain it in the context of gulp. I’m going to assume you understand gulp and npm. If you don’t, there’s literally thousands of places you can go to learn about that shit for free. Or you could just whine about how complex things are getting on Twitter without making the effort to actually learn something that might make your job easier.

I will be using gulp-autoprefixer, it’s a gulp–friendly version of Andrey Sitnik’s fantastic autoprefixer. It does lots of cool shit. It doesn’t just auto prefix willy–nilly, it consults the imperial Can I Use API and lets you choose how many versions back you want to support prefixed features. Need your tacky animations to work in a 5–version–old Chrome? Autoprefix + Can I Use makes that shit happen.

Install that shit

$ npm install gulp-autoprefixer

We’re in Terminal. Get over it.

This installs autoprefixer in your project. That’s all it takes.

Use that shit


gulp.src('./css/*.css')
  .pipe(prefix("last 2 versions"))
  .pipe(gulp.dest('./dist/'));

We give gulp a folder and file structure to work with (every ‘.css’ file in a ‘./css/‘ folder), then pipe that into a prefix task with some sexy natural language parameters. In this case, I just want to prefix for the last 2 versions of browsers. That’s it.

The last line just tells gulp where to output the prefixed code.

If you’re using gulp, you’re probably using it to watch and compile your Sass/LESS, because gulp uses piping in such a sexy way, you can simply pipe straight from your sass() call into autoprefix before it’s compiled into your source CSS file:


gulp.task('sass', function() {
  gulp.src(['./assets/sass/*.scss'])
    .pipe(sass())
    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest('./public/css/'))
    .pipe(livereload());
});

So what’s going on here is, in simple terms, some time–saving awesomeness. I’m using gulp to compile my Sass, the output is then piped into autoprefix, which goes through the compiled file and finds all the unprefixed rules that should be prefixed (remember it consults the Can I Use API to find this out, more on why that’s sexual in a second), sticks the prefixes where it needs to, then outputs all that to my destination file. Stick that in your watch task and you have on–the–fly auto–prefixing whenever you change a Sass file. No more repetitive, prefixed code in your development files. No more shitty mixins. Just write your CSS as you would and forget about the whole sordid world of prefixes.

Can I Use

The beauty of this whole setup is the Can I Use API, as soon as a prefix is no longer needed, it won’t be added. If you need to support older versions, you just change your ‘last n versions’ parameter and recompile your CSS. You have a build task that perfectly matches, and can change with, your browser strategy.

So yeah; auto–prefixing—yet another time–saving slice of awesome for the lazy developer like me. Be sure to read the documentation to see some of the more complex/awesome shit it can do.

If this article helped you out in any way, or if you think I’m a prick and want to shout at me, hit me up on Twitter.