explaingit

postcss/autoprefixer

★ 22,252JavaScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

TLDR

Automatically adds browser-specific CSS prefixes to your stylesheets based on which browsers you need to support, so you don't have to write them by hand.

Mindmap

mindmap
  root((Autoprefixer))
    What it does
      Adds vendor prefixes
      Removes outdated ones
      Reads Can I Use data
    How it works
      PostCSS plugin
      Reads config file
      Targets browsers
    Configuration
      .browserslistrc file
      package.json config
      Browser targets
    Use cases
      Multi-browser CSS
      Build pipelines
      Modern workflows
    Integration
      Command-line tool
      Build tool plugins
      Development workflow

Things people build with this

USE CASE 1

Build a website that works consistently across Chrome, Firefox, Safari, and older browsers without manually writing vendor prefixes.

USE CASE 2

Automatically clean up outdated browser prefixes from legacy CSS when you update your target browser support.

USE CASE 3

Integrate CSS processing into your build pipeline so prefixes are added during development or deployment.

USE CASE 4

Configure your project to support specific browsers (e.g., 'last 2 versions' or 'browsers with >5% market share') and have prefixes applied accordingly.

Tech stack

JavaScriptPostCSSNode.jsCSS

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Autoprefixer is a tool that solves an annoying part of writing CSS: the need to repeat the same rule several times with different "vendor prefixes" so that older or non-standard browsers will understand it. Vendor prefixes are little tags like -webkit- or -moz- that browser makers historically attached to experimental CSS features. With Autoprefixer, you write plain modern CSS and the tool adds the extra prefixed lines for you, based on which browsers you actually care about supporting. The way it works is as a PostCSS plugin, PostCSS being a system for parsing and transforming CSS through plugins. Autoprefixer parses your stylesheet and consults the Can I Use database, which tracks which CSS properties and values are supported in which browser versions. It then adds the prefixed variants only where they are still genuinely needed. The browsers you target are configured through a tool called Browserslist, typically using a .browserslistrc file or a browserslist key in package.json, with queries such as "> 5%". The README emphasises sharing that config with other tools like babel-preset-env and Stylelint. So for example, a rule using ::placeholder or width: stretch gets expanded automatically to include -moz-placeholder, -webkit-fill-available, and -moz-available alongside the standard rule. You would use Autoprefixer any time you maintain a CSS codebase that needs to work across a range of browsers and you don't want to manually track which features still require which prefixes. The README notes it is recommended by Google and used at companies like Twitter and Alibaba. It also covers special cases: it can optionally translate modern CSS Grid syntax into the older IE 10 and IE 11 syntax (off by default, with limitations described in detail in the README), and it does not add JavaScript polyfills, only CSS prefixes. There are integrations for Gulp, webpack, CSS-in-JS, a command line interface, other build tools, preprocessors, GUI tools, and editors. The project itself is written in JavaScript. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
How do I set up Autoprefixer in my project to automatically add CSS vendor prefixes for browsers I need to support?
Prompt 2
Show me how to configure Autoprefixer to target specific browsers using .browserslistrc or package.json.
Prompt 3
I have old CSS with outdated vendor prefixes. How can I use Autoprefixer to remove prefixes that are no longer needed?
Prompt 4
How do I integrate Autoprefixer into my build tool (webpack, Gulp, etc.) so it processes CSS automatically?
Prompt 5
What's the difference between what Autoprefixer does and polyfills? When would I use each one?
Open on GitHub → Explain another repo

Generated 2026-05-21 · Model: sonnet-4-6 · Verify against the repo before relying on details.