Autoprefixer是基于PostCSS和caniuse数据、按browserslist配置智能添加必要浏览器前缀的工具，不处理vh单位压缩、backdrop-filter不稳定等问题，且依赖PostCSS流程正确运行和精准的浏览器目标配置。
别手动写 -webkit-、-moz-、-ms- 前缀——99% 的场景下，这既低效又容易出错。真正该做的是让构建工具自动补全，并且只补你真实需要的前缀。
Autoprefixer 是什么，它到底补哪些前缀
Autoprefixer 不是“把所有前缀都塞进去”的暴力补丁，它是按 browserslist 配置，查 caniuse 数据库，只给尚未原生支持某个特性的浏览器加前缀。比如：display: flex 在 Safari 12.1+ 已原生支持，那 iOS 13+ 就不会加 -webkit-box；但 IE10 只认 -ms-flexbox，就会补上。
- 它不处理
vh单位压缩、backdrop-filter在 iOS 15.4 之前的不稳定、position: sticky嵌套失效等问题 - 它不降级语法：写了
gap: 1rem，它不会帮你 fallback 成margin间距 - 它不改语义：
aspect-ratio在 iOS 15.0 上有渲染 bug，Autoprefixer 不会规避，得靠 JS 或媒体查询拦截
PostCSS 流程没跑通，装了 Autoprefixer 也白搭
很多项目报“前缀没生效”，根本不是配置问题，而是 CSS 文件压根没进 PostCSS 流水线。常见断点：
- Vite 5+ 默认启用 PostCSS，但如果你在
vite.config.js里写了css.postcss字段，反而会覆盖默认配置，导致插件不加载 - Webpack 必须显式配
postcss-loader，漏掉css-loader或顺序错（比如放在style-loader后面），前缀就丢了 - Vue 单文件组件中，
<style>默认不走 PostCSS；要写成<style lang="postcss">，或确认vue-style-loader→css-loader→postcss-loader链路完整 - create-react-app 对
.scss文件默认不走 PostCSS，需额外装postcss-scss并配postcss.config.js
browserslist 配置必须匹配真实用户环境
写 "last 2 versions" 看似稳妥，但 Safari 更新慢、iOS 版本滞后，容易漏掉关键机型。国内大量用户还在 iOS 16.4、Android 12 WebView，而配置却拉进了 Safari 18 ——结果该补的前缀没补，不该补的还多塞一堆。
立即学习“前端免费学习笔记（深入）”；
- 优先把
browserslist写在package.json里，避免.browserslistrc和 CI 环境不一致 - 运行
npx browserslist，确认输出里真有你要覆盖的项，比如ios_saf 16.4、and_uc 14.4 - 别迷信
> 1%：iOS 15.0 全球占比仍超 1%，但它对aspect-ratio支持不稳定，得显式写"iOS >= 16.4" - 某些属性（如
-webkit-backdrop-filter）caniuse 标记状态不稳定，需在postcss.config.js中用overrideBrowserslist强制锁定版本
哪些 CSS 属性必须手动加前缀或回退
Autoprefixer 不碰的几类情况，必须人工干预：
-
vh单位在 iOS Safari 地址栏展开/收起时被压缩 → 用 JS 注入--vh: 100vh并监听resize动态更新 -
line-clamp和::first-letter在 Safari 16.4+ 有冲突 → 分开写，不要嵌套在同一个选择器里 - IE8/9 的
opacity必须搭配filter: alpha(opacity=50)，Autoprefixer 不生成这个 -
border-radius在旧版 Android WebView 中部分失效 → 加-webkit-border-radius，并测试圆角是否被裁切
复杂点从来不在“怎么加前缀”，而在“加完之后，那个浏览器到底有没有执行它”——尤其当页面混用 JS 控制样式、CSS 自定义属性、第三方 UI 库时，前缀只是兼容链的第一环。
