I hate writing vendor prefixes in my CSS. I am constantly having to look up what vendor prefixes are needed for different CSS properties. The list is constantly changing as browsers settle on official standards. A great example is border-radius. In the past, you needed to use the following vendor prefixes:

-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;

 

But a while ago, browser vendors settled on a standard for border-radius and now the vendor prefixes are no longer needed.

border-radius: 2px 2px 2px 2px;

 

Keeping up with the changes involves either following the W3C CSS specs very closely and/or constantly checking http://caniuse.com/.

Autoprefixer

It turns out that there is a great tool called Autoprefixer that can add vendor prefixes for you automatically. Autoprefixer can parse your CSS and automatically add vendor prefixes based on information from caniuse. You can even specify exactly what browsers you would like to target so autoprefixer doesn’t need to add vendor prefixes that your application does not need.

Not only does autoprefixer add missing vendor prefixes, it is also smart enough to remove vendor prefixes that are no longer needed. For example, –moz-border-radius and _–webkit-border-radius _would be removed for you.

Gulp Autoprefixer

The easiest way to use autoprefixer is by using a task runner like Gulp or Grunt. Building on my previous examples of using Gulp and Bower with Visual Studio, we can simply install the gulp-autoprefixer npm package:

npm install gulp-autoprefixer –save-dev

Here is a very simple gulp task that will process a CSS file and output a minified and non-minified version of that CSS file with the vendor prefixes added.

 

var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');

var config = {
    appcss: 'Content/Site.css',
    cssout: 'Content/dist/css'
}

gulp.task('css', function () {
    return gulp.src([config.appcss])
     .pipe(autoprefixer())
     .pipe(gulp.dest(config.cssout))
     .pipe(minifyCSS())
     .pipe(concat('app.min.css'))
     .pipe(gulp.dest(config.cssout));
});

When I run this task, the CSS file _Content/Site.css _is processed by autoprefixer and then output to Content/dist/css/app.css. A minified version is also output to the same folder.

In my _Layouts.cshtml, I link to the generated Content/dist/css/app.min.css file.

<link href="~/Content/dist/css/app.min.css" rel="stylesheet" />

 

Whenever the CSS gulp task runs, the output files will be regenerated. For example, the following CSS from Site.css:

.fancy-flex-section {
    display: flex;
}

.fancy-rounded {
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
}

 

will be processed by autoprefixer and output as:

.fancy-flex-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.fancy-rounded {
    border-radius: 2px 2px 2px 2px;
}

 

Specify Target Browsers

Specifying the browsers you want to target is simply a matter of passing a parameter to autoprefixer. Under the covers, autoprefixer uses Browserlist, which gets browser usage data from caniuse. A common approach is to support the last 2 versions of all major browsers.

gulp.task('css', function () {
    return gulp.src([config.appcss])
     .pipe(concat('app.css'))
     .pipe(autoprefixer({ browsers: ['last 2 version'] }))
     .pipe(gulp.dest(config.cssout))
     .pipe(minifyCSS())
     .pipe(concat('app.min.css'))
     .pipe(gulp.dest(config.cssout));
});

Another approach is to support any browser that has more than x% market share:

gulp.task('css', function () {
    return gulp.src([config.appcss])
     .pipe(concat('app.css'))
     .pipe(autoprefixer({ browsers: ['> 5%'] }))
     .pipe(gulp.dest(config.cssout))
     .pipe(minifyCSS())
     .pipe(concat('app.min.css'))
     .pipe(gulp.dest(config.cssout));
});

The list of options for targeting browsers is impressive. You can even target browsers based on usage in a specific country. For a complete list, go check out Browserlist.

Conclusion

With autoprefixer, you no longer need to worry about writing vendor prefixes in your CSS. Simply write your CSS in un-prefixed format and let autoprefixer do the rest for you.