Guide · Open source
How to use Autoprefixer: setup, browser targets and FAQs
Updated · written with AI from the project's own documentation and checked against our catalogue data
Autoprefixer is a plugin for PostCSS that reads your plain CSS and adds the vendor prefixes your target browsers need. It is aimed at front-end developers who want to stop writing and maintaining -webkit- and -moz- prefixes by hand. After this guide you will know what it needs, how it picks browser targets, and where its limits are.
Autoprefixerpostcss/autoprefixer · ★ 22.2k · MIT Install options & downloads Quick start
- 1Check your prerequisites. Make sure Node.js, npm or another JavaScript package manager, and PostCSS are available in your project.
- 2Get the source. The README's install instruction is a git clone of https://github.com/postcss/autoprefixer. Follow your package manager's documentation to add the package to your project.
- 3Write unprefixed CSS. Write standard CSS and leave out vendor prefixes, since Autoprefixer adds them.
- 4Set browser targets. Add a .browserslistrc file or a browserslist key in package.json to define the browsers you support.
- 5Add Autoprefixer to your build. Run it through your build tool, such as gulp-postcss in Gulp, so the CSS is processed on build.
- 6Check the output. Review the generated CSS and test the result in your target browsers, especially for Grid features.
What Autoprefixer does
You write normal CSS without browser-specific prefixes. Autoprefixer uses data from Can I Use and current browser popularity to decide which prefixes to add for property and value support.
For example, given an unprefixed ::placeholder rule and a width: stretch declaration, Autoprefixer outputs prefixed versions such as ::-moz-placeholder and width: -webkit-fill-available alongside the original rules.
::-moz-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
.image {
width: -moz-available;
width: -webkit-fill-available;
width: stretch;
}Install Autoprefixer with a package manager
Autoprefixer is distributed as a plugin for PostCSS, so you need Node.js, npm or another JavaScript package manager, and PostCSS in your project. The README's install instruction in the source is a git clone of the repository at https://github.com/postcss/autoprefixer, so check the project's npm listing for the package install command you use in your own setup.
- Prerequisites: Node.js, npm or another JavaScript package manager, PostCSS
- Install method: package manager
git clone https://github.com/postcss/autoprefixerSet your target browsers with Browserslist
Autoprefixer uses Browserslist to decide which browsers to support. The recommended way is a .browserslistrc file in your project root, or a browserslist key in your package.json. Queries such as > 5% are documented in the Browserslist docs.
Putting the config in a shared file is useful because other tools such as babel-preset-env and Stylelint can read the same settings.
- Option 1: a .browserslistrc file in the project root
- Option 2: a browserslist key in package.json
- Browserslist docs cover queries, browser names, config format and defaults
Use Autoprefixer in a build pipeline
Autoprefixer runs inside a build tool. The README documents usage with Gulp through gulp-postcss, along with sections on Webpack, CSS-in-JS, the CLI, JavaScript and other build tools. Pick the one your project already uses.
In Gulp, you require the autoprefixer package inside a task that passes your CSS through gulp-postcss.
- Gulp: use gulp-postcss with the autoprefixer npm package
- Webpack, CLI and JavaScript usage are covered in the README's Usage section
gulp.task('autoprefixer', () => {
const autoprefixer = require('autoprefixer')Know the limits before you rely on it
Autoprefixer only adds prefixes. It does not add polyfills for missing JavaScript behaviour, so you will need other tools for that. It also needs unprefixed properties as input: legacy code that contains only -webkit- properties will not get other prefixes, so run a tool such as postcss-unprefix first.
Grid prefixes for old Internet Explorer are disabled by default because the README says the translation does not work in every case. Autoprefixer does not add -epub- prefixes, and it does not transform the system-ui font family.
- Does not add polyfills
- Needs unprefixed input; use postcss-unprefix for legacy -webkit- only code
- Grid support for IE is off by default and needs testing
- Does not add -epub- prefixes; use postcss-epub for ePub3
What people use it for
- Adding -webkit- and -moz- prefixes to a plain CSS project without maintaining them by hand
- Sharing one browser-target config between Autoprefixer, Stylelint and babel-preset-env
- Adding prefixes to CSS inside a Gulp, Webpack or other PostCSS-based build pipeline
Frequently asked questions
Does Autoprefixer add polyfills?
No. The README says Autoprefixer only adds prefixes. For polyfill-like features, the README points to postcss-preset-env, which bundles polyfills and Autoprefixer.
Why doesn't Autoprefixer add prefixes to border-radius?
The README says developers are often surprised by how few prefixes are still required. If Autoprefixer adds nothing, check whether the prefix is still needed on Can I Use.
How do I use Autoprefixer with legacy -webkit- only code?
Autoprefixer needs unprefixed properties to add prefixes. The README recommends running postcss-unprefix before Autoprefixer to convert CSS to an unprefixed state.
Does Autoprefixer add -epub- prefixes?
No. Autoprefixer works only with browser prefixes from Can I Use. The README suggests postcss-epub for prefixing ePub3 properties.
Why doesn't Autoprefixer transform the system-ui font family?
The README says system-ui is not technically a prefix and its transformation is not future-proof. postcss-font-family-system-ui can convert it to a practical font-family list.
Is Autoprefixer free to use?
The project is licensed under the MIT licence, as listed in the source. Check the LICENSE file in the repository for the full terms.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Autoprefixer suits front-end developers who write plain CSS, already use PostCSS, Gulp or Webpack, and want one shared browser-target config. If your code is legacy prefix-only CSS or you need JavaScript polyfills, pick a different tool or add one alongside it, such as postcss-unprefix or postcss-preset-env.
Install options & downloads