Autoprefixer
A PostCSS plugin that adds vendor prefixes to CSS rules automatically, using Can I Use data.
- Stars
- 22.2k
- Forks
- 1.3k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 10 days ago
- Type
- Library
What it is
Autoprefixer is a plugin for PostCSS, a tool that processes CSS. You write normal CSS without browser-specific prefixes, and it adds the prefixes that your target browsers need, based on data from Can I Use and current browser popularity. Which browsers it targets is set through Browserslist config files.
- Add -webkit- and -moz- prefixes to CSS during a build step
- Target a set of browsers by setting a browserslist query such as > 5% in package.json
- Enable experimental CSS Grid translation for older IE versions with the grid option
- Combine with postcss-preset-env to add polyfills alongside prefixes
Great for
- Front-end developers who write plain CSS and want to stop managing prefixes by hand
- Projects already using a build pipeline with PostCSS, Gulp, or Webpack
- Teams that want one shared browser-target config across several tools
Not ideal for
- Projects that only need to support very old, prefix-only code: the README says it needs unprefixed properties to add prefixes, so legacy -webkit- only code needs a separate tool like postcss-unprefix first
- Anyone needing polyfills for missing JavaScript behavior: the README states it only adds prefixes and does not add polyfills
How to get it
- 1
Install with a package manager
You'll need: Node.js · npm or another JavaScript package manager · PostCSS
Install the package
git clone https://github.com/postcss/autoprefixer - 2
Run it
- Install PostCSS and Autoprefixer in your project
- Set your target browsers in a .browserslistrc file or a browserslist key in package.json
- Add autoprefixer to your PostCSS plugin list in your build setup
- Run your build and check the output CSS for added prefixes
- 3
Get the most out of it
- Use a .browserslistrc file so Autoprefixer, Babel, and Stylelint share one target list
- Enable grid prefixes only if needed, using the grid: autoplace option or the AUTOPREFIXER_GRID environment variable
- Use the interactive demo at autoprefixer.github.io to preview output before wiring it into a build
- Check Can I Use when a prefix seems missing, as the FAQ recommends
Downloads
Strengths
- Uses Can I Use data, so prefixes track real browser support
- Works with a shared Browserslist config that other tools like Babel and Stylelint can also read
- Widely used, with 22k+ GitHub stars and an MIT license
Trade-offs
- Grid-to-IE translation is disabled by default and the README says it does not work in every case
- Only handles prefixes; it does not add polyfills or fix other browser bugs
- Output depends on the browser targets you set, so the config needs to be maintained
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| autoprefixer (this) | 22.2k | Library | intermediate | 10 days ago | Front-end developers who write plain CSS and want to stop managing prefixes by hand |
| stylelint | 11.5k | Dev tool | intermediate | 8 days ago | Front-end teams that want consistent CSS across a shared codebase |
| styled-components | 41.1k | Library | intermediate | 7 days ago | React developers who prefer writing styles alongside components in JavaScript |
| emotion | 18k | Library | intermediate | 14 days ago | React developers who want styles colocated with components |
| barba | 13k | Library | intermediate | 1.9 years ago | Developers adding animated transitions to an existing multi-page website |
| linaria | 12.4k | Library | intermediate | 4 days ago | React or other JavaScript teams who want CSS-in-JS without a runtime styling cost |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.