How to Add CSS Vendor Prefixes Automatically
Autoprefixer makes the life of frontend developers much easier

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.
Common Prefixes
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:
- Interactive demo https://autoprefixer.github.io/
- Docs https://github.com/postcss/autoprefixer
- PostCSS https://postcss.org/
- Browserslist https://github.com/browserslist/browserslist