Autoprefixer 是基于 caniuse 数据和目标浏览器范围智能添加 CSS 前缀的 PostCSS 插件，避免手写前缀导致的遗漏或冗余；需通过 PostCSS 配置接入，依赖正确 browserslist 设置与构建链路对齐。
Autoprefixer 是什么，为什么不能只靠手写前缀
Autoprefixer 不是“自动加前缀的开关”，它根据 caniuse 数据和你声明的目标浏览器范围，智能决定哪些 CSS 特性需要加前缀、加哪些、加到哪一级。手写前缀不仅容易漏（比如忘了 -webkit- 在某些 Flex 属性里的旧写法），还会在浏览器升级后变成冗余代码，拖慢加载和维护成本。
常见错误现象：display: flex 在 iOS 8.4 上不生效，但开发者只写了标准语法，没意识到 Safari 8 需要 display: -webkit-box 和 display: -webkit-flex；或者反过来，在现代项目里还保留着早已废弃的 -ms-grid，导致 CSS 体积变大、调试混乱。
怎么在项目里接入 Autoprefixer（PostCSS 方式）
Autoprefixer 本质是 PostCSS 插件，必须通过 PostCSS 运行。不是“装个 Autoprefixer 就能用”，而是“配置好 PostCSS pipeline，再把 Autoprefixer 插进去”。
- 安装依赖：
npm install --save-dev postcss autoprefixer - 创建
postcss.config.js，内容必须导出对象：module.exports = { plugins: [ require('autoprefixer') ] } - 确保构建工具（如 Webpack、Vite、Gulp）已配置 PostCSS 加载器——例如 Webpack 的
postcss-loader，Vite 默认支持postcss.config.js，但需确认未被css.postcss配置覆盖
目标浏览器怎么写才不翻车
browserslist 配置直接决定 Autoprefixer 输出什么。写得太宽（如 last 2 versions）会塞进大量过时前缀；写得太窄（如 Chrome >= 110）又可能漏掉真实用户环境。
立即学习“前端免费学习笔记（深入）”；
推荐做法：
- 在 package.json 里加 browserslist 字段，或单独建 .browserslistrc
- 生产环境用明确版本范围，例如：
"> 1%,\nlast 2 Chrome versions,\nFirefox ESR,\niOS >= 12,\nSafari >= 13"
- 避免模糊表达：
not dead 看似省事，但 dead 定义依赖 caniuse 更新节奏，可能某天突然砍掉某个你还在用的旧 Android WebView 版本
验证方式：运行 npx browserslist，看输出是否符合预期；配合 npx autoprefixer --info 查当前规则下哪些属性会被处理
常见误配导致前缀没生效
最常踩的坑不是插件没装，而是“看起来配了，其实没走 Autoprefixer 流程”：
- CSS 文件没经过 PostCSS 处理：比如 Vue 项目里
<style>块默认走 vue-style-loader + css-loader，需确认css-loader的importLoaders设置是否 ≥ 1，否则@import的文件不会进 PostCSS - PostCSS 配置位置不对：Vite 要求
postcss.config.js在项目根目录；Webpack 中若用postcss-loader，其options.config路径写错也会静默失效 - 源码用了 CSS-in-JS 或预处理器（如 Sass）：Autoprefixer 只处理最终生成的 CSS 字符串，需确保它在编译链条的最后一步（即 Sass → CSS → Autoprefixer），而非插在中间
- 写了
/* autoprefixer ignore next */却忘了删，结果整块样式被跳过
调试技巧：临时在 CSS 里写个明确会加前缀的属性，比如 transform: rotate(45deg);，然后检查构建输出的 CSS 是否出现 -webkit-transform —— 没有就说明链路断了
真正麻烦的从来不是“怎么加前缀”，而是“怎么让前缀只加在需要的地方，且随浏览器演进自动收敛”。一旦 browserslist 和构建链路没对齐，要么白加，要么漏加，还不好定位。
