最常需加前缀的属性是 transform、flex、backdrop-filter；transform 需 -webkit-transform（iOS Safari ≤15.6 等），flex 在 IE10 需 -ms- 前缀，backdrop-filter 在 Safari 9–15.6 需 -webkit-，而 grid 基本无需前缀。
哪些 CSS 属性最常需要加前缀
不是所有新特性都需要前缀，但像 transform、transition、flex、grid、filter、backdrop-filter 这些在旧版 Chrome、Safari、Firefox 中确实容易出兼容问题。特别是 flex 的老语法（display: -webkit-box）和新语法混用时，IE10/11 会直接忽略整个声明块。
常见错误现象：样式在 Chrome 看着正常，Safari 里布局错乱，或者 Firefox 下动画不触发——大概率是漏了 -webkit- 或 -moz- 前缀，或者用了已废弃的老前缀（比如 -ms- 用于 transform 在 Edge 16+ 就不再需要）。
-
transform：必须加-webkit-transform（iOS Safari ≤15.6、Android Browser ≤4.4） -
flex：IE10 需要-ms-flexbox和-ms-flex-align，不能只靠现代语法 -
backdrop-filter：Safari 9–15.6 需-webkit-backdrop-filter，Chrome/Firefox 原生支持但版本较新 - 避免给
grid加前缀：CSS Grid 在主流浏览器中基本无需前缀（IE 用的是完全不同的-ms-grid语法，且不兼容现代写法）
autoprefixer 是怎么工作的，为什么不能全靠它
autoprefixer 本身不“猜”你用什么浏览器，它依赖 browserslist 配置决定加哪些前缀。如果你的项目没配 browserslist，或者配成 last 2 versions，它可能漏掉 iOS Safari 14.5 这类仍有 3% 市场份额但不算“last”的版本。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
package.json里明确写："browserslist": ["iOS >= 12", "Chrome >= 65", "Firefox >= 60"] - 用
npx autoprefixer --info检查当前配置实际覆盖哪些版本 - 不要把
autoprefixer当黑盒——它不会修复语法错误，比如把gap: 1rem加到 IE11 上（IE11 根本不支持gap），它只会沉默跳过 - 检查生成后的 CSS，确认关键属性确实被补上前缀，而不是因为源码写法不标准（比如写了
display: flex却没写flex-direction）导致整条规则被丢弃
遇到“加了前缀还是不生效”该怎么排查
前缀只是表象，真正卡住的往往是更底层的渲染限制或语法冲突。比如 -webkit-backdrop-filter 在 iOS Safari 中开启需要同时满足三个条件：元素有背景色（哪怕是 background-color: transparent）、父容器没有 overflow: hidden、且不能是 position: fixed 的子元素。
典型场景和对策：
- Safari 下
transform: scale(0.9)没效果 → 改成transform: translateZ(0) scale(0.9)强制触发硬件加速 - Firefox 中
transition卡顿 → 确认过渡属性是否在 will-change 列表里，或改用transform替代left/top - Android 4.4 WebView 里
flex-wrap: wrap失效 → 改用-webkit-flex-wrap: wrap，并确保父容器设了display: -webkit-flex - IE10 下
justify-content: center不居中 → 必须配-ms-flex-pack: center，且父容器需display: -ms-flexbox
现代项目里哪些前缀可以放心去掉
不是越全越好。冗余前缀会增大 CSS 体积，还可能干扰调试。比如 -o-（Opera Presto）前缀在 2013 年后就彻底淘汰了，现在加它纯属噪音；-ms- 除了 grid 相关（-ms-grid-column 等）和 IE10/11 的 flex，其他基本不用。
可安全移除的情况：
-
-o-transform、-o-transition：Opera 已切换 Blink 内核多年 -
-ms-transform（非 IE 场景）：Edge 16+ 使用标准语法，IE11 对transform的支持也只需-ms-前缀一次，不需要额外-webkit- - 所有带
-khtml-的声明：Konqueror 浏览器早已退出历史舞台 - 用
@supports包裹的现代特性（如@supports (backdrop-filter: blur(1px))）内部无需再加前缀——@supports本身已做能力检测
最容易被忽略的是：某些构建工具（比如旧版 Vue CLI）默认启用的 autoprefixer 版本太老，会误加已淘汰前缀。升级 autoprefixer 到 10.4+ 并配合准确的 browserslist 才能真正“按需加”。
