需重点兼容旧版Edge（18及更早）、Safari（15.6及更早）、Firefox（90之前）和Android WebView（Chrome 70–80），IE已停用无需兼容；查兼容性首选caniuse.com，PostCSS autoprefixer仅补前缀不降级特性，优先用@supports和特性检测而非UA判断。
哪些浏览器需要重点兼容
现代 CSS 特性在 Chrome、Firefox、Safari 和 Edge（Chromium 内核）中支持度普遍较好，但真正需要关注的是：
-
Edge 18 及更早版本（旧 EdgeHTML 内核，已停用但部分企业环境仍在用） -
Safari 15.6 及更早（尤其 iOS 15.6 Safari 对aspect-ratio、scrollbar-gutter等支持不全） -
Firefox 90 之前（比如container queries直到 111 才完全支持） - Android WebView（特别是旧版系统预装 WebView，常卡在 Chrome 70–80 左右）
别盲目兼容 IE —— 它已于 2022 年 6 月彻底停止支持，除非明确接到政企客户要求，否则无需投入精力。
如何快速查某个 CSS 属性的兼容性
最可靠的方式是直接查 caniuse.com，输入属性名（如 gap、:has()、inset-block），它会按浏览器版本标出「完全支持」「部分支持」「需前缀」和「不支持」。
注意几个关键细节：
立即学习“前端免费学习笔记（深入）”；
-
:has()在 Safari 15.4+ 支持，但 Safari 15.4–15.6 有严重渲染 bug，实际建议等Safari 16+ -
aspect-ratio在 Firefox 89+ 原生支持，但旧版需用padding-top百分比 hack 替代 -
scrollbar-width和scrollbar-color仅 Firefox 支持；WebKit 系（Safari/新版 Edge）仍不支持自定义滚动条样式
PostCSS + autoprefixer 能自动补前缀吗
能，但有明确边界：它只处理 autoprefixer 规则库中定义的、已被标准草案收录且浏览器实现过半的特性，比如 flex、transform、grid 的旧语法。
它不会帮你：
- 降级不支持的特性（如把
gap拆成margin） - 添加 polyfill（如
dialog元素或subgrid） - 处理未标准化的实验性语法（如
@layer在旧 Safari 中无效，autoprefixer 不会删或转译）
配置示例（postcss.config.js）：
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['> 0.5%', 'last 2 versions', 'not dead']
})
]
}
其中 last 2 versions 指各浏览器最新两个稳定版，不是“最近发布的两个版本”，这点容易误解。
遇到兼容性问题时优先考虑什么方案
先判断是否真需要支持——很多所谓“兼容问题”其实是设计稿没考虑响应式断点或设备能力差异。
- 对非核心交互样式（如
backdrop-filter模糊背景），用@supports安全包裹：@supports (backdrop-filter: blur(1px)) { .card { backdrop-filter: blur(4px); } } - 对布局类缺失（如旧 Safari 不支持
display: grid），提供display: flex回退，而非强行 polyfill - 避免用 JavaScript 检测浏览器类型（
navigator.userAgent），改用特性检测（'CSS' in window && CSS.supports('color', 'color-mix(in srgb, red, blue)')）
最常被忽略的一点：CSS 自定义属性（--primary-color）在 IE 完全不支持，且无法通过 PostCSS 降级——如果项目必须兼容 IE，就得放弃 CSS 变量，改用预处理器变量或内联 style。
