Autoprefixer — Add Vendor Prefixes to CSS Automatically

Introduction

Autoprefixer parses CSS and adds or removes vendor prefixes based on current browser usage data from Can I Use. It eliminates the need to manually write -webkit-, -moz-, or -ms- prefixed properties, keeping source CSS clean and standards-compliant.

What Autoprefixer Does

• Adds vendor prefixes to CSS properties, values, and at-rules automatically
• Removes outdated prefixes that are no longer needed by target browsers
• Uses live data from Can I Use to determine which prefixes are required
• Supports the Browserslist configuration standard for specifying target browsers
• Integrates with any build tool as a PostCSS plugin

Architecture Overview

Autoprefixer runs as a PostCSS plugin, receiving a parsed CSS AST and walking each declaration. It checks each property and value against a database generated from Can I Use data, then inserts or removes prefixed variants based on the Browserslist query. The output is a modified AST that PostCSS serializes back to CSS. The Can I Use data is bundled in the caniuse-lite package and updated independently.

Self-Hosting & Configuration

• Install alongside PostCSS: npm install autoprefixer postcss
• Configure target browsers via .browserslistrc or browserslist key in package.json
• Use with PostCSS CLI, Webpack (postcss-loader), Vite, or Gulp
• Set grid: true to enable CSS Grid prefixes for IE 10-11
• Pass remove: false to keep existing prefixes unchanged

Key Features

• Data-driven: prefix decisions are based on real browser usage statistics, not guesswork
• Browserslist integration lets teams share a single browser target across all tools
• Grid support for IE with grid: "autoplace" option
• Automatically removes legacy prefixes when target browsers no longer need them
• Works with any PostCSS-compatible build pipeline or editor plugin

Comparison with Similar Tools

• PostCSS Preset Env — includes Autoprefixer plus polyfills for modern CSS features
• Sass/Less mixins — require manual mixin calls; Autoprefixer works on plain CSS output
• Lightning CSS — an all-in-one CSS transformer in Rust that handles prefixing and more
• Stylis — a CSS preprocessor used by styled-components; narrower prefix coverage

FAQ

Q: Do I still need Autoprefixer with modern browsers? A: Yes for older targets. It also cleans up unnecessary prefixes, keeping your CSS lean.

Q: How do I update the browser data? A: Run npx update-browserslist-db@latest to refresh caniuse-lite in your project.

Q: Does it work with Tailwind CSS? A: Yes. Tailwind recommends Autoprefixer in its PostCSS setup for vendor prefix handling.

Q: Can I exclude specific prefixes? A: Not individual prefixes, but you control scope via Browserslist queries like > 1%, last 2 versions.

Sources

• https://github.com/postcss/autoprefixer
• https://autoprefixer.github.io/