PostCSS + Autoprefixer 是最可靠的自动补全前缀方案，依据 browserslist 配置精准注入所需前缀；应禁用手写前缀，统一写标准属性，配合 @supports 和媒体查询兜底新特性，并在 CI/CD 中用 doiuse 检查兼容性。
PostCSS + Autoprefixer 是当前最可靠的自动补全方案
浏览器前缀不是靠人肉维护的，靠工具链自动注入。PostCSS 作为 CSS 处理平台，配合 autoprefixer 插件，能根据目标浏览器范围（browserslist 配置）精准添加 -webkit-、-moz- 等前缀，且只加真正需要的——比如 flex 在 Chrome 29+ 不需要前缀，但 gap 在 Safari 14.1 之前必须加 -webkit-。
常见错误是只配了 "last 2 versions"，结果打包后 iOS 13.7 的 Safari 仍漏掉 -webkit-overflow-scrolling: touch。正确做法是明确写死支持范围：
["iOS >= 13", "Chrome >= 87", "Firefox >= 80", "Safari >= 14.1"]
Autoprefixer 会据此查 Can I Use 数据库，动态决定是否插入前缀、插哪些。
不要在 CSS 里手动写 -webkit- 前缀
手写前缀看似“保险”，实则埋下三类隐患：一是重复添加（如同时写了 display: flex 和 display: -webkit-flex），二是过时冗余（-ms-transform 在 Edge 16+ 已废弃），三是与 Autoprefixer 冲突导致覆盖或失效。
立即学习“前端免费学习笔记（深入）”；
实际项目中应统一约定：
- CSS 源码只写标准属性（
transform、backdrop-filter、aspect-ratio） - 所有前缀由构建流程自动注入
- 用
/* autoprefixer ignore next */注释跳过个别特殊场景（如需兼容已知不支持某特性的旧版 WebView）
注意 CSS 新特性本身的兼容性边界
Autoprefixer 只处理语法层面的前缀，不解决特性本身不可用的问题。比如 container query（@container）即使加了前缀也无法在 Chrome 105 以下运行，因为底层 API 根本不存在。
这类情况需分层应对：
- 用
@supports (container-type: inline-size)做特性检测降级 - 对关键布局，保留一套基于
max-width/min-width的媒体查询兜底 - 避免在
node_modules中直接引用含高阶特性的第三方 CSS 库（如某些 Tailwind 插件默认启用scroll-snap，但 Android UC 浏览器不支持）
CI/CD 中加入 CSS 兼容性检查环节
本地开发时容易忽略低版本浏览器表现，等上线才发现按钮错位或动画卡顿。可在构建后加一步静态检查：
用 doiuse 扫描打包后的 CSS，报告不支持目标浏览器的特性：
npx doiuse --browsers "iOS >= 13, Chrome >= 87" dist/main.css
输出类似：
dist/main.css line 42: backdrop-filter — Not supported in Safari 13.1, iOS Safari 13.4
把它接入 CI 脚本，一旦命中不兼容项就阻断发布——比靠人工 QA 在真机上点一遍更可靠。
真正麻烦的从来不是加前缀，而是新特性没 fallback、构建配置和线上环境浏览器列表不一致、或者把 Autoprefixer 当万能胶水乱用。工具只是执行者，决策得人来定。
