No more CSS vendor prefixes, Autoprefixer comes to Visual Studio

If you want to use the latest and greatest in CSS3 you are going to have to use vendor prefixes to ensure the best browser support. Knowing when and which vendor prefixes are required in CSS is a constantly changing battlefield.

Prefixed hell

CSS3 properties get included in the spec, browser versions change, and before we know it we have CSS littered with unneeded prefixed properties. For example, border-radius hasn't required vendor prefixes since Chrome 4 or Firefox 3.6. But I bet if you look through a web project you'll find it prefixed somewhere.

So not only is it a pain to know what properties require prefixes but we also need to periodically go back through our CSS and remove prefixes that are no longer needed. That was until Autoprefixer.

What is Autoprefixer?

Autoprefixer is a post processor which parses CSS and adds vendor prefixes based on data from Can I Use. This means we no longer need to worry about prefixing, Autoprefixer will do it for us. For example, we can write:

.smokey {
    border-image: url(img.png) 10px / 20px round;
}

And Autoprefixer will generate:

.smokey {
    -webkit-border-image: url(img.png) 10px / 20px round;
         -o-border-image: url(img.png) 10px / 20px round;
            border-image: url(img.png) 10px / 20px round;
}

How do I use it in Visual Studio

Autoprefixer is available in Web Essentials 2013 (note: only if you are using SASS or LESS) and is very simple to set up. Under Tools > Options > Web Essentials > CSS, there are a couple of Autoprefixer settings.

Set Enable Autoprefixer to true and now whenever your SASS or LESS files are compiled, any vendor prefixes required, will be added.

Specifying browser support

The second setting, Targeted browsers, allows us to specify which browsers we would like to support. For example:

last 2 versions

Targets the last 2 versions of each browser. A full list of options for browser support can be found here.

It is literally as simple as that. No more mixins full of vendor prefixes. No more out of date CSS. No more thinking about vendor prefixes full stop!