Autoprefixing

It can be challenging to remember which vendor prefixes you have to use for specific CSS rules to support a large variety of users. Autoprefixing solves this problem. It can be enabled through PostCSS and the autoprefixer plugin. autoprefixer uses Can I Use service to figure out which rules should be prefixed and its behavior can be tuned further.

Setting Up Autoprefixing#

Achieving autoprefixing takes a small addition to the current setup. Install postcss-loader and autoprefixer first:

npm install postcss-loader autoprefixer --save-dev

Add a fragment enabling autoprefixing:

webpack.parts.js

exports.autoprefix = () => ({
  loader: "postcss-loader",
  options: {
    plugins: () => [require("autoprefixer")()],
  },
});

To connect the loader with CSS extraction, hook it up as follows:

webpack.config.js

const productionConfig = merge([
  parts.extractCSS({
use: "css-loader",
use: ["css-loader", parts.autoprefix()],
}), ... ]);

To confirm that the setup works, we have to add something to autoprefix. Adjust the CSS:

app/main.css

...

.pure-button { -webkit-border-radius: 1em; border-radius: 1em; }

If you know what browsers you prefer to support, it's possible to set up a .browserslistrc file. Different tools pick up this definition, autoprefixer included.

You can lint CSS through Stylelint. It can be set up the same way through postcss-loader as autoprefixing above.

Set up a file as follows:

.browserslistrc

> 1% # Browser usage over 1%
Last 2 versions # Or last two versions
IE 8 # Or IE 8

If you build the application now (npm run build) and examine the built CSS, you should be able to find a declaration there without the webkit portion:

...

.pure-button { border-radius: 1em; }

autoprefixer is able to remove unnecessary rules and also add rules which are required based on the browser definition.

Conclusion#

Autoprefixing is a convenient technique as it decreases the amount of work needed while crafting CSS. You can maintain minimum browser requirements within a .browserslistrc file. The tooling can then use that information to generate optimal output.

To recap:

  • Autoprefixing can be enabled through the autoprefixer PostCSS plugin.
  • Autoprefixing writes missing CSS definitions based on your minimum browser definition.
  • .browserslistrc is a standard file that works with tooling beyond autoprefixer
Previous chapter
Eliminating Unused CSS
Next chapter
Loading Assets

This book is available through Leanpub (digital), Amazon (paperback), and Kindle (digital). By purchasing the book you support the development of further content. A part of profit (~30%) goes to Tobias Koppers, the author of webpack.

Need help?