How to Add CSS Vendor Prefixes Automatically

Autoprefixer makes the life of frontend developers much easier

Luca Spezzano
Sep 24, 2019 · 3 min read
Photo by Mika Baumeister on Unsplash

Something that I hated to do when I used to write CSS code was adding CSS vendors prefix. Come on guys everyone gets bored to write the same CSS rules for different browsers.

So let’s start from the begging!

If you are interested in setting up a CSS build process with Gulp I suggest you to read this article.

What are the CSS vendor prefixes

So they allow you to run all your CSS rules across all browsers.

Common Prefixes

  • -webkit- supported by OPERA, SAFARI, GOOGLE CHROME
  • -moz- supported by FIREFOX
  • -ms- supported by EDGE/INTERNET EXPLORER

Autoprefixer

It allows you to write your CSS rules without vendor prefixes, it takes care of doing that based on current browser popularity and property support.

If you want to see how it works here you can find an interactive demo to check it out.

Why should you use Autoprefixer?

Also Google recommends to use it (read here) and it is used in companies as Twitter and Alibaba.

Do I need to say something else?

How to use Autoprefixer?

I will Show you how to use it with Webpack, Gulp and npm scripts.

Autoprefixer with Webpack

module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}

If you already have configurated your webpack.config.js simply add the object inside your rules array.

Now you need to create a new file postcss.config.js

Inside this new file write:

module.exports = {
plugins: [
require('autoprefixer')
]
}

Done! Now just run your build process to see it.

Autoprefixer with Gulp

npm install autoprefixer gulp-postcss gulp-sourcemaps --save-dev

after in your gulpfile.js require the packages

const autoprefixer = require('autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
postcss = require('gulp-postcss');

and now let’s write your gulp

gulp.task('autoprefixer', () => {
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([autoprefixer()]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist'))
})

Done! Now just run your build process to see it.

Autoprefixer with npm scripts

npm install postcss-cli autoprefixer --save-dev

Now inside your package.json add a scripts object like that

"scripts": {
"autoprefixer": "postcss src/assets/css/*.css --use autoprefixer -d build/"
}

and npm run autoprefixer to run it.

As you can see using Autoprefixer is very easy and you can use it in your development workflow as you prefer.

Don’t waste time anymore adding the CSS vendors prefix by hand, use Autoprefix in your favourite way.

Useful resources:

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade