Luca Spezzano

Follow

Sep 24, 2019 · 3 min read

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