I’m by no means a web developer, but I do like to play around with web technologies. I was recently looking into the new(ish) CSS Flexbox layout methods, and came across a problem that plagues developers all the time. Support for Flexbox is spotty: most of the major browsers support it but a handful of mobile browsers do not, and nor do some versions of IE and Safari. If I were to use it on a site, I’d have to use browser prefixes to support IE10, for example.
It’s a pain to have to write browser specific styles using prefixes and if you want to implement experimental CSS, you end up doing it a lot, which can make CSS messy and difficult to maintain. And, let’s face it, it’s just not fun at all.
If you’re a regular reader here, you’ll have seen our recent article on Gulp, the node-based task-runner. It’s a handy tool and there are lots of modules available for it that automate common development tasks, one of which, you’ll be happy to hear, is prefixing.
Image you could just write your stylesheets using whichever CSS you like without regard for browser-specific prefixes. Following which you could just run your CSS through a Gulp plugin have it process the CSS and add all the necessary prefixes. You’d never have to manually add another prefix.
Let me introduce you to Autoprefixer. Autoprefixer parses CSS and adds any necessary prefixes automatically. It uses the extremely handy Can I Use website to source information about browser support and prefixes. It’ll also remove any unnecessary prefixes, which tend to sneak in via CSS frameworks and the like.
Autoprefixer is pretty nifty on its own but in combination with Gulp it gets even better. Using the gulp-autoprefixer module, you can stream CSS files through autoprefixer as part of your site’s build process, allowing developers to write clean prefix-free CSS.
For the most part, gulp-autoprefixer just works, but there are a couple of options that can be used. To make your CSS look pretty, autoprefixer can cascade the prefixes—adding whitespace to make the prefixes line up (although, if you’re using the minification gulp plugin, it won’t make any difference in the end). Secondly, you can specify which browsers you’re interested in supporting, so that the resulting CSS doesn’t get bloated with extraneous prefixes.
Autoprefixer along with Gulp makes it much more pleasant to write CSS without having to worry about browser support (although you should keep in mind that it handles only prefixes, not polyfills.)