What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Autoprefixer is a PostCSS plugin that adds or removes CSS vendor prefixes according to the browsers your project supports. It reads a shared Browserslist policy, checks compatibility data, and transforms CSS during the build. It is often still useful for projects supporting older browsers, but it is not a JavaScript polyfill, a complete CSS transpiler, or a guarantee that an old browser will behave like a modern one.
At the time of the source check on August 18, 2026, the latest release shown was 10.5.0, released April 13, 2026; package versions can change after that date. Check the release page for the current version.
What Autoprefixer does
Older browser engines sometimes implemented experimental or pre-standard CSS features behind prefixes such as -webkit-, -moz-, -ms-, and -o-. Autoprefixer lets you write the standards-oriented declaration and generates only the prefixed forms required by your configured targets.
For example, your source can remain:
.example {
display: flex;
user-select: none;
appearance: none;
}A target policy that includes browsers needing older syntax could produce output such as:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.example {
display: -ms-flexbox;
display: flex;
-ms-user-select: none;
user-select: none;
}It does not blindly add every historical prefix. Its decisions come from browser-support data and the browsers selected by Browserslist. Autoprefixer is distributed as the MIT-licensed autoprefixer package and runs as a PostCSS plugin. See the Autoprefixer project and PostCSS overview.
Is Autoprefixer still needed?
There is no universal yes-or-no answer. If your project targets only current evergreen browsers, the generated CSS may contain few or no prefixes. That is normal, not evidence that the plugin is broken. Autoprefixer can still be valuable because the browser policy is declared once and the output adjusts when that policy or its compatibility data changes.
- Use it when you support a defined range that includes browsers requiring prefixed CSS, or when your PostCSS pipeline already includes it.
- Omit a separate installation when your build already uses
postcss-preset-env, which includes Autoprefixer according to the current webpack documentation, or when adding a CSS build step would be disproportionate. - Do not rely on it alone for missing JavaScript APIs, semantic browser differences, accessibility problems, layout workarounds, or runtime behavior.
The package does not add general polyfills: its FAQ explains the distinction.
How browser targeting controls the output
Autoprefixer normally gets its targets from Browserslist:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors- Your project declares queries such as
> 1%,last 2 versions, ornot dead. - Browserslist resolves those policies to concrete browser versions using its usage data.
- Autoprefixer consults compatibility information derived from Can I Use data.
- PostCSS parses and transforms the CSS abstract syntax tree.
- Your build emits the transformed CSS, with source-map behavior handled by the surrounding PostCSS runner.
Put the policy in one authoritative location, usually .browserslistrc or the browserslist field in package.json:
{
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}Queries are policies, not permanent version lists. For example, last 2 versions resolves differently as new releases arrive. Keeping browser targets in shared Browserslist configuration also lets tools such as Babel and Stylelint use the same policy. Avoid maintaining conflicting targets in several config files unless you intentionally need environment-specific overrides. The Autoprefixer browser-configuration documentation describes the supported locations and options.
Install and configure a minimal PostCSS pipeline
Install the packages
npm install --save-dev postcss autoprefixerIf you are using PostCSS from the command line, add its CLI as well:
npm install --save-dev postcss-cliThe package name is autoprefixer; the current package page is on npm.
Create the PostCSS configuration
A broadly compatible CommonJS configuration is:
module.exports = {
plugins: [
require('autoprefixer')
]
}In an ESM project, use the module syntax supported by that project:
export default {
plugins: {
autoprefixer: {}
}
}The exact syntax depends on your Node.js and package configuration. With Browserslist in package.json or .browserslistrc, no browser list needs to be duplicated inside this plugin declaration.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Webpack, direct JavaScript, and managed integrations
Webpack with postcss-loader
The webpack loader chain should run PostCSS after CSS loading:
module.exports = {
module: {
rules: [
{
test: /.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 1 }
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["autoprefixer", {}]
]
}
}
}
]
}
]
}
}See the postcss-loader documentation for current loader syntax. That documentation also notes that postcss-preset-env already includes Autoprefixer, so configuring both separately can be redundant.
Use PostCSS from JavaScript
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const css = `
.example {
display: flex;
user-select: none;
}
`
postcss([autoprefixer])
.process(css, {
from: 'src/input.css',
to: 'dist/output.css'
})
.then(result => {
console.log(result.css)
result.warnings().forEach(warning => {
console.warn(warning.toString())
})
})Providing from and to gives PostCSS useful filenames for diagnostics and source maps. Runner guidance recommends the asynchronous API because plugins may perform asynchronous work; see the PostCSS API and runner guidelines.
Why no prefix appeared
When the generated CSS looks unchanged, check the build rather than adding manual prefixes immediately.
- Run
npx autoprefixer --info. This reports the browsers selected by the current configuration and the rules, selectors, and properties that may receive prefixes. The command is documented in Autoprefixer’s debug section. - Confirm that the resolved Browserslist targets actually require the prefix. Modern targets may not.
- Inspect the final CSS in the build output, not only the source file.
- Verify that the expected
postcss-loader,postcss-cli, or framework PostCSS integration is running and loading the intended configuration file. - Check whether
postcss-preset-envis already processing the file. - Confirm that the feature is one Autoprefixer transforms. It cannot add behavior for every new CSS feature.
Why a prefix was removed
Autoprefixer defaults to both adding and removing prefixes. If a Browserslist update means a prefix is no longer needed, it may disappear from generated CSS even when your source did not change. That is expected policy-driven output.
Correct an inaccurate browser policy first. If a deliberate compatibility hack requires preserving all existing prefixes, disable removal explicitly:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11module.exports = {
plugins: [
require('autoprefixer')({ remove: false })
]
}Another option for a narrow browser-specific workaround is a deliberate manual declaration after the standard one. Keep such exceptions documented rather than making them the normal authoring style. Options are listed in the Autoprefixer options reference.
Flexbox options and limitations
Flexbox prefixing is enabled by default. The documented settings are:
| Setting | Effect |
|---|---|
true |
Prefix Flexbox properties. |
false |
Disable Flexbox prefixing. |
"no-2009" |
Avoid the old 2009 specification syntax while retaining final and IE-related handling. |
require('autoprefixer')({ flexbox: 'no-2009' })Historical Flexbox implementations were not identical. A generated prefix does not guarantee that an old browser interprets modern Flexbox semantics perfectly, so test layouts in every browser you actually support.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.CSS Grid and Internet Explorer: translation, not a polyfill
Autoprefixer can translate some modern Grid declarations into the -ms- syntax used by Internet Explorer 10 and 11, but Grid translation is disabled by default. It is incomplete, has limited autoplacement support, and must be tested in the relevant IE environment if IE support is a real requirement.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Best Value
| Setting | Meaning |
|---|---|
false |
Disable Grid translation; default. |
"autoplace" |
Enable translation with limited autoplacement support. |
"no-autoplace" |
Enable translation without autoplacement support. |
Enable it in configuration:
module.exports = {
plugins: [
require('autoprefixer')({ grid: 'autoplace' })
]
}Or use a control comment or environment variable:
/* autoprefixer grid: autoplace */AUTOPREFIXER_GRID=autoplace npm run buildDocumented limitations include:
- Explicit columns and rows must both be defined for the relevant autoplacement behavior.
repeat(auto-fit, ...)andrepeat(auto-fill, ...)are unsupported for this purpose.- Manual cell placement and row or column spans cannot be mixed freely with an autoplacement grid.
- Some pseudo-element patterns can cause problems.
- Changing
gapvalues may require columns and rows to be declared again.
Read the full Grid autoplacement documentation. Calling this an “IE Grid polyfill” overstates what it does.
Control comments and practical options
For an isolated exception, the project supports comments such as:
/* autoprefixer: off */
/* autoprefixer: on */
/* autoprefixer: ignore next */
/* autoprefixer grid: autoplace */
/* autoprefixer grid: no-autoplace */
/* autoprefixer grid: off */Use comments sparingly. A corrected Browserslist policy or a narrowly isolated compatibility exception is usually easier to maintain. Other documented options include supports, cascade, and env; use the project’s current options reference rather than copying old tutorials.
Autoprefixer compared with adjacent tools
| Tool or approach | Main purpose | When to choose it |
|---|---|---|
| Autoprefixer | Vendor-prefix management based on browser targets. | Your CSS needs policy-driven prefixed declarations. |
postcss-preset-env |
Broader modern-CSS syntax transformations and compatibility fallbacks; it includes Autoprefixer. | You need more than prefixing. |
| Manual prefixes | A one-off browser-specific declaration. | A documented, intentional hack that the normal policy cannot express. |
postcss-flexbugs-fixes |
Workarounds for known Flexbox implementation bugs. | A browser bug, rather than a missing prefix, is the problem. |
postcss-unprefix |
Normalizes legacy prefixed-only input. | Old source contains only forms such as -webkit- declarations. |
| JavaScript polyfills | Runtime APIs and behavior. | The browser lacks a JavaScript or platform feature. |
@supports and progressive enhancement |
Feature-aware CSS choices. | Different browsers need different layouts or capabilities. |
Autoprefixer generally needs the unprefixed declaration as its source of truth. Legacy code containing only a prefixed form, such as an old -webkit-gradient, will not automatically become every equivalent modern form; the project discusses using postcss-unprefix before Autoprefixer in that situation. See the legacy-code FAQ.
What Autoprefixer cannot solve
- It cannot provide JavaScript polyfills or missing platform APIs.
- It cannot repair semantic differences between browser engines.
- It cannot guarantee correct old-browser layout behavior.
- It cannot replace
@supports, runtime feature detection, accessibility testing, or visual regression testing. - It cannot make complex, responsive CSS Grid layouts fully work in Internet Explorer.
- It does not process Sass, Less, or Stylus source as a preprocessor; compile those languages to CSS first, then run the CSS through PostCSS.
- Its main workflow is CSS processed by PostCSS. HTML containing inline CSS is a separate use case handled by the project’s documented
html-autoprefixeroption.
Recommendation
Use Autoprefixer when your project already processes CSS with PostCSS or supports browsers for which prefixes are still relevant. Keep browser targets in one shared Browserslist policy, inspect the generated CSS, and test the actual browsers you claim to support. If your build already uses postcss-preset-env, do not add a second, redundant Autoprefixer configuration. Treat Grid-to-IE translation as a limited compatibility experiment requiring layout tests, not as a complete polyfill.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
