Autoprefixer 是基于 PostCSS 的工具，能根据 browserslist 配置自动为 CSS 属性添加厂商前缀；需安装 postcss 和 autoprefixer，配置 browserslist 指定目标浏览器，并在构建工具中集成 PostCSS 插件；例如 display: flex 会被补全为包含 -webkit-、-ms- 等前缀的多版本，确保兼容性，开发者只需编写标准 CSS 即可。
Autoprefixer 是一个基于 PostCSS 的 CSS 后处理工具，能够根据你指定的浏览器兼容性需求，自动为 CSS 属性添加所需的厂商前缀（如 -webkit-、-moz- 等），无需手动编写。它利用 Can I Use 的数据来判断哪些属性需要前缀，极大提升了开发效率和兼容性。
安装 Autoprefixer 和 PostCSS
要在项目中使用 Autoprefixer，首先需要安装 PostCSS 和 Autoprefixer 依赖：
如果你使用构建工具（如 Webpack、Vite 或 Gulp），还需配置 PostCSS 插件管道。
配置 browserslist 明确目标浏览器
Autoprefixer 通过项目的 browserslist 配置决定需要支持哪些浏览器，从而决定添加哪些前缀。可以在 package.json 中添加如下字段：
立即学习“前端免费学习笔记（深入）”；
- "browserslist": [
- "> 1%",
- "last 2 versions",
- "not dead"
- ]
也可以创建 .browserslistrc 文件：
- > 1%
- last 2 versions
- not ie
这个配置告诉 Autoprefixer 只为市场占有率大于 1%、主流浏览器最近两个版本，并排除已停止支持的 IE 浏览器添加前缀。
在构建工具中集成 PostCSS + Autoprefixer
以 Webpack 为例，在 postcss.config.js 中启用 Autoprefixer：
- module.exports = {
- plugins: [
- require('autoprefixer')
- ]
- };
Webpack 的 css-loader 会自动读取 PostCSS 配置。Vite、Parcel 等现代工具也默认支持 PostCSS 配置文件，只需放入根目录即可生效。
实际效果示例
原始 CSS：
- .flex-container {
- display: flex;
- }
经过 Autoprefixer 处理后（针对较老浏览器）：
- .flex-container {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- }
flexbox、transform、transition 等属性都会被自动补全，确保在旧版浏览器中正常渲染。
基本上就这些。只要配置好 browserslist 并接入 PostCSS 流程，Autoprefixer 就能无缝工作，让你专注写标准 CSS，前缀问题交给工具处理。不复杂但容易忽略。
