Autoprefixer + Browserslist: Smarter Vendor Prefixing for CSS

Why manual vendor prefixes still sneak into CSS

Writing CSS for cross-browser compatibility often means tacking on -webkit-, -moz- or -ms- prefixes by hand. Its easy to forget one, and even easier to accumulate prefixes that no browser needs anymore.

Autoprefixer runs inside PostCSS

PostCSS is a JavaScript-based CSS transformer that parses styles into an abstract syntax tree. Plugins walk that tree, and Autoprefixer is the one that adds the right prefixes based on your browser support list.

Choosing a browserslist that fits your project

Autoprefixer relies on Browserslist to decide which prefixes are actually required. A common starting point is a .browserslistrc file:

last 2 versions 0.5 percent not dead

This targets the two most recent versions of every major browser excludes browsers with 0.5 percent or less global usage and removes browsers that are no longer receiving updates.

Worked example: running Autoprefixer locally

Set up the tools from the command line:

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

Create a postcss.config.js that loads the plugin:

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

Add a browserslist file (.browserslistrc) to your project root with your desired targets.

Run the transformation on a test stylesheet:

npx postcss style.css -o output.css

Open output.css. You will see user-select: none paired with -webkit- and -moz- variants if those prefixes are still required by your browser list. Change the browserslist to target only the latest version re-run the command and those prefixes disappear.

Trade-off: compatibility versus CSS bloat

Using a very broad browser list will generate dozens of obsolete prefixes inflating your stylesheet size and slowing stylesheet parsing. Conversely targeting only the latest browser may leave some users on older versions with broken layouts. The sweet spot is a project-specific list that matches your actual user base regularly audited with tools like Can I Use or BrowserStack.

Another risk: if PostCSS runs after minification the minifier may alter the AST or strip comments preventing Autoprefixer from locating where to inject prefixes. Always place Autoprefixer early in your build pipeline before minification.

Quick verification checklist

1. Confirm PostCSS runs before minification in your build tool (Webpack Vite Gulp).
2. Compare output CSS with a broad browserslist versus a tight one to measure the impact on file size.
3. Test the oldest browser in your list on a local VM or BrowserStack to verify prefixed properties are honored.