How Does Autoprefixer Add Vendor Prefixes?

Autoprefixer is a widely used PostCSS plugin that automates cross-browser CSS compatibility by parsing standard stylesheet declarations, comparing required properties against target browser datasets, and injecting vendor prefixes directly into the code. Rather than using crude regular expressions or hardcoded lists, Autoprefixer relies on PostCSS to transform raw CSS into an Abstract Syntax Tree (AST). It then cross-references your specified browser targets via Browserslist against data from Can I Use to add necessary vendor prefixes—and remove obsolete ones—before serializing the tree back into clean, production-ready CSS.

The Role of PostCSS and the Abstract Syntax Tree

Autoprefixer does not parse CSS on its own; it operates as an AST transformer within the PostCSS ecosystem. When a stylesheet is passed to PostCSS, the parser reads the text character by character and constructs an Abstract Syntax Tree (AST).

An AST is a hierarchical tree representation of the code structure:

• Root: The top-level node containing the entire stylesheet.
• AtRule: Statements beginning with @ (e.g., @keyframes, @media, @supports).
• Rule: CSS selectors containing one or more declarations (e.g., .container { ... }).
• Declaration: Key-value style pairs (e.g., display: flex or user-select: none).
• Comment: Comments within the CSS file.

By breaking CSS into distinct nodes, Autoprefixer can programmatically inspect properties, values, selectors, and at-rules without accidentally altering string literals or comments.

Target Definition via Browserslist and Can I Use

Before modifying any node, Autoprefixer determines which prefixes are actually required based on your configuration.

1. Target Resolution: It reads the project's .browserslistrc file or package.json configuration (e.g., > 1%, last 2 versions, not dead) to identify target browsers.
2. Support Lookup: It references caniuse-lite, a compact version of the Can I Use database, which tracks the exact browser versions requiring prefixes like -webkit-, -moz-, -ms-, or -o-.
3. Prefix Mapping: It generates an in-memory dictionary mapping standard CSS features to specific vendor prefixes based on the active target matrix.

AST Traversal and Node Modification

Once the tree is built and the browser targets are established, Autoprefixer traverses each node in the AST:

1. Inspecting Declarations and Values

Autoprefixer walks through all Declaration nodes to check both the property name and the assigned value.

• Property Prefixing: If a property like appearance requires a prefix in your target browsers, Autoprefixer creates clone nodes with -webkit-appearance or -moz-appearance and inserts them immediately before the standard property.
• Value Prefixing: If a property is standard but its value is prefixed (such as display: -webkit-flex or background: -webkit-linear-gradient(...)), Autoprefixer duplicates the declaration with the prefixed values.

2. Inspecting At-Rules and Selectors

CSS prefixing extends beyond standard rules:

• Keyframes: For @keyframes animations, Autoprefixer checks if -webkit-@keyframes is required, duplicating the entire block if necessary.
• Pseudo-elements and Selectors: For selectors like ::placeholder, it inserts the appropriate prefixed versions (e.g., ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder).

3. Cleaning Obsolete and Unneeded Prefixes

Autoprefixer also includes a clean-up phase. If your source CSS already contains outdated or redundant prefixes that no longer match your Browserslist targets (such as old -moz-border-radius declarations), Autoprefixer identifies and strips those nodes from the AST.

Stringifying the Modified AST

After all AST nodes have been inspected, inserted, or removed, PostCSS initiates the stringification process. It walks the updated tree and serializes each node back into a plain CSS string.

Because the modifications happen at the node level, the output preserves accurate source maps, line formatting, and comment placement. The resulting CSS file contains standard, modern declarations alongside only the exact vendor prefixes required by your intended audience.