How to Add CSS Vendor Prefixes Automatically

Autoprefixer makes the life of frontend developers much easier

Luca Spezzano
Sep 24, 2019 · 3 min read
Image for post
Image for post
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

CSS vendor prefixes allow the makers of web browsers to add support for the latest CSS features, for experimentation or a testing period.

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

The CSS browser prefixes that you can use are:

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

Autoprefixer

The autoprefixer is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

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?

Autoprefixer makes the life of frontend developers much easier because as I said they don’t need to think anymore which prefix to add for different browsers and to do research, Autoprefixer takes care of that and obviously it saves a lot of time.

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?

The documentation it is very clear (you can read here) and you can use Autoprefixer in different ways and with many build tools such as Gulp, Webpack, Grunt, Cli and others.

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

Autoprefixer with Webpack

Inside your webpack.config.js add this:

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

We need to install the packages at first

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

We need to install the packages at first

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…

By NotOnlyCSS

Articles and tips for frontend developers Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store