Automate Vendor Prefixing with PostCSS Autoprefixer – A Practical Guide

Why Vendor Prefixes Still Bite

When you write display: grid; or user-select: none;, the property itself is fine, but the browsers that still need a prefixed version can break the layout if you forget a rule. Keeping track of which browsers require which prefix is tedious, especially when the browser support matrix changes every release.

The key takeaway: let a build tool decide for you. With PostCSS and the Autoprefixer plugin, you write plain CSS once and let the tool add or remove prefixes based on real‑world usage data.

How Autoprefixer Works

PostCSS parses your CSS into an Abstract Syntax Tree (AST). Plugins walk this tree and can modify, add, or remove nodes. Autoprefixer is one of the most popular plugins. It consults the Can I Use database, which tracks actual browser support, and the Browserslist configuration that tells it which browsers you care about.

For each rule, Autoprefixer checks:

• Does the property need a prefix for any of the target browsers?
• If so, which prefix is required?
• Are there already prefixed forms present? If so, it leaves them untouched.
• Should the prefix be removed because the browser no longer requires it?

When you run a build, Autoprefixer inserts the necessary prefixed declarations and can strip outdated ones.

Setting Up a Minimal Build

Below is a minimal, reproducible workflow using the PostCSS CLI. The same configuration works inside Webpack, Vite, or any other tool that supports PostCSS.

1. Install the dependencies

npm install --save-dev postcss postcss-cli autoprefixer

Run this in your project root. You need npm or yarn with appropriate write permissions.

2. Define the browser targets

Create a .browserslistrc file in the root. This file is shared by Autoprefixer, Babel, ESLint, and many other tools. A common configuration is:

last 2 versions
> 0.5%
not dead

Explanation:

• last 2 versions – the two most recent releases of each major browser.
• > 0.5% – browsers that have more than 0.5% global market share.
• not dead – exclude browsers with no new versions in the last 24 months.

3. Configure PostCSS

Create postcss.config.js in the project root:

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

Autoprefixer automatically picks up the .browserslistrc file.

4. Run the build

Assuming you have a source file src/styles.css, execute:

npx postcss src/styles.css -o dist/styles.css

Now dist/styles.css contains the prefixed rules required for your target browsers.

Concrete Example

Input src/styles.css:

.container {
  display: grid;
  user-select: none;
}

Running the build with the configuration above will produce (among other lines) something like:

.container {
  display: -ms-grid;
  display: grid;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Notice how Autoprefixer added -ms-grid for older Edge/IE and -webkit-user-select for Safari and older Android browsers. If the target list excludes those browsers, the prefixed lines would be omitted.

Trade‑offs and Caveats

• Build step required – Autoprefixer runs during your build. You can’t simply drop a raw CSS file into a production page and expect prefixes to be added on the fly.
• CSS bloat – Over‑broad target lists (e.g., > 0.1%) will cause prefixes for very old browsers, increasing file size without benefit. Keep the list focused on your real audience.
• Outdated data risk – Autoprefixer relies on the can‑i‑use database. If you keep the autoprefixer package out of date, you may miss new prefix rules or keep obsolete ones. Run npm update autoprefixer regularly.
• Non‑prefix vendor features – Autoprefixer only handles CSS prefixes. Features that require entirely different syntax or fallback strategies (e.g., @supports hacks) need separate handling.

How to Verify the Output

1. Open dist/styles.css and search for -webkit-, -moz-, or -ms- to confirm prefixes appear.
2. Pick a property you know is prefixed (e.g., backdrop-filter) and check the generated CSS. Cross‑reference with Can I Use to ensure the prefixes match current support.
3. Temporarily narrow the browser list (e.g., last 1 chrome version) and rebuild. The prefixed rules should disappear, indicating the tool respects the configuration.

Next Steps

Once you’re comfortable with the CLI, you can plug Autoprefixer into your preferred bundler:

• Vite – add import autoprefixer from 'autoprefixer'; to vite.config.js and include it in css.postcss.
• Webpack – use postcss-loader in your module rules, ensuring autoprefixer is listed in the plugins array.
• Rollup – add the rollup-plugin-postcss plugin with plugins: [autoprefixer()].

Because Browserslist is shared across tools, you only maintain one definition of “target browsers.” This keeps your build consistent and your configuration DRY.

Conclusion

Vendor prefixes are a relic of the past, but they still exist in a handful of browsers. By integrating PostCSS with Autoprefixer, you let the tool do the heavy lifting: add the right prefixes, drop the obsolete ones, and keep your CSS lean. Just remember that the build step is mandatory and that the breadth of your target list directly influences file size.

Try the minimal setup above, tweak the .browserslistrc to match your user base, and let Autoprefixer handle the rest.