现代项目中-webkit-和-moz-基本不用手写，除非明确支持IE11或旧版Firefox ESR；主流浏览器已原生支持flex、grid、aspect-ratio等属性，前缀残留多因遗留代码、Autoprefixer配置过宽或实验性属性（如view-transition-name）所致。
现代项目里，-webkit- 和 -moz- 基本不用手写了
除非你明确要支持 IE11 或 Firefox ESR 旧版本（比如低于 102 的版本），否则绝大多数 CSS 新特性在主流浏览器中已原生支持，无需手动加前缀。Chrome、Edge、Safari 和新版 Firefox 都已默认启用 flex、grid、aspect-ratio、scroll-behavior 等常用属性，连 backdrop-filter 这种曾经高度依赖前缀的属性，现在也只需写一次标准名。
哪些情况还可能遇到前缀残留？
常见于三类场景，不是“该不该加”，而是“为什么还在”：
- 遗留代码里手动写的
-webkit-transition或-moz-appearance没被清理，实际已失效或冗余 - 构建工具（如 Autoprefixer）配置了过宽的浏览器范围（例如
last 10 versions），导致为早已淘汰的 Android Browser 4.4 或 Safari 9 生成无意义前缀 - 某些实验性属性（如
view-transition-name）仍处于草案阶段，目前仅 Chrome 支持且强制要求-webkit-view-transition-name，但这是特例，不是惯例
Autoprefixer 配置建议：用 defaults 而不是模糊描述
如果你用 Vite、Vue CLI 或 Webpack，Autoprefixer 默认已集成。关键在 .browserslistrc 或 package.json 中的配置项：
- ✅ 推荐：
defaults—— 表示 “> 0.5%, last 2 versions, not dead” ，覆盖当前所有活跃主流版本 - ⚠️ 少用：
last 2 versions—— 会包含已停止更新的旧版 Safari/Edge，徒增体积 - ❌ 避免：
ie >= 11—— 除非真有 IE11 兼容需求，否则它会让 Autoprefixer 给几乎所有属性加-ms-和-webkit-
执行 npx browserslist 可实时查看当前配置实际匹配的浏览器列表，比凭经验判断更可靠。
立即学习“前端免费学习笔记（深入）”；
手写前缀最大的风险：掩盖兼容性问题
当你在 CSS 里显式写出 -webkit-clip-path 却漏掉标准 clip-path，或者只写 -moz-box-sizing 而不写 box-sizing，就等于主动放弃现代浏览器的原生行为，还可能触发旧引擎的 bug。更隐蔽的问题是：某些前缀属性（如 -webkit-line-clamp）至今没有标准替代方案，但它本身是私有实现，行为不稳定 —— 这时与其硬加前缀，不如用 JavaScript 方案兜底或降级显示。
