# Autoprefixer — Add Vendor Prefixes to CSS Automatically

> Autoprefixer is a PostCSS plugin that uses data from Can I Use to add the correct vendor prefixes to your CSS rules, so you can write clean standard CSS and let the tool handle browser compatibility.

## Install

Save as a script file and run:

# Autoprefixer — Add Vendor Prefixes to CSS Automatically

## Quick Use
```bash
npm install autoprefixer postcss postcss-cli
echo "::placeholder { color: gray; }" | npx postcss --use autoprefixer
# Output includes -webkit-input-placeholder, -ms-input-placeholder, etc.
```

## Introduction
Autoprefixer parses CSS and adds or removes vendor prefixes based on current browser usage data from Can I Use. It eliminates the need to manually write -webkit-, -moz-, or -ms- prefixed properties, keeping source CSS clean and standards-compliant.

## What Autoprefixer Does
- Adds vendor prefixes to CSS properties, values, and at-rules automatically
- Removes outdated prefixes that are no longer needed by target browsers
- Uses live data from Can I Use to determine which prefixes are required
- Supports the Browserslist configuration standard for specifying target browsers
- Integrates with any build tool as a PostCSS plugin

## Architecture Overview
Autoprefixer runs as a PostCSS plugin, receiving a parsed CSS AST and walking each declaration. It checks each property and value against a database generated from Can I Use data, then inserts or removes prefixed variants based on the Browserslist query. The output is a modified AST that PostCSS serializes back to CSS. The Can I Use data is bundled in the `caniuse-lite` package and updated independently.

## Self-Hosting & Configuration
- Install alongside PostCSS: `npm install autoprefixer postcss`
- Configure target browsers via `.browserslistrc` or `browserslist` key in `package.json`
- Use with PostCSS CLI, Webpack (postcss-loader), Vite, or Gulp
- Set `grid: true` to enable CSS Grid prefixes for IE 10-11
- Pass `remove: false` to keep existing prefixes unchanged

## Key Features
- Data-driven: prefix decisions are based on real browser usage statistics, not guesswork
- Browserslist integration lets teams share a single browser target across all tools
- Grid support for IE with `grid: "autoplace"` option
- Automatically removes legacy prefixes when target browsers no longer need them
- Works with any PostCSS-compatible build pipeline or editor plugin

## Comparison with Similar Tools
- **PostCSS Preset Env** — includes Autoprefixer plus polyfills for modern CSS features
- **Sass/Less mixins** — require manual mixin calls; Autoprefixer works on plain CSS output
- **Lightning CSS** — an all-in-one CSS transformer in Rust that handles prefixing and more
- **Stylis** — a CSS preprocessor used by styled-components; narrower prefix coverage

## FAQ
**Q: Do I still need Autoprefixer with modern browsers?**
A: Yes for older targets. It also cleans up unnecessary prefixes, keeping your CSS lean.

**Q: How do I update the browser data?**
A: Run `npx update-browserslist-db@latest` to refresh `caniuse-lite` in your project.

**Q: Does it work with Tailwind CSS?**
A: Yes. Tailwind recommends Autoprefixer in its PostCSS setup for vendor prefix handling.

**Q: Can I exclude specific prefixes?**
A: Not individual prefixes, but you control scope via Browserslist queries like `> 1%, last 2 versions`.

## Sources
- https://github.com/postcss/autoprefixer
- https://autoprefixer.github.io/


---
Source: https://tokrepo.com/en/workflows/asset-6756a57c
Author: Script Depot