应结合caniuse数据与@supports生成动态兼容性断言：fallback需前置，构建时用postcss插件校验目标浏览器支持状态，ci中通过playwright真实环境快照比对，并注入source map精准定位失效声明行号。
用 caniuse + @supports 生成可执行的兼容性断言
别写死浏览器版本列表，直接从 caniuse.com API 或本地缓存数据（如 caniuse-lite）提取目标特性在真实用户覆盖范围内的支持状态。比如你用了 aspect-ratio，就查它在 Safari 15.4–15.6 是否有已知渲染 bug；查到有，就立刻生成一条 CSS 断言规则：@supports not (aspect-ratio: 1/1) { .box { width: 200px; height: 200px; } }。关键点在于：fallback 必须写在 @supports 外部且前置，否则旧浏览器解析失败会跳过整条规则。
把 CSS 特性检测编译进构建产物做静态拦截
PostCSS 插件是目前最轻量可行的方案。不是只跑 autoprefixer，而是加一个自定义插件，在构建时扫描所有 @supports 声明，比对项目配置的目标浏览器范围（如 last 2 versions, Safari >= 15.4, Firefox >= 90）。一旦发现某条 @supports (display: grid) 在 Safari 15.4 中实际不支持（caniuse 数据明确标为 partial），就抛出构建错误或警告。这比等 CI 跑完截图再人工排查快一个数量级。
- 必须禁用
autoprefixer的“宽松模式”，否则它可能对部分不完整支持的特性（如 Safari 15.6 的:has()）也加前缀，造成假阳性 -
@supports检测值必须合法：写@supports (color: oklch(0% 0 0))有效，但@supports (oklch)语法非法，整条规则会被浏览器忽略 - 避免嵌套逻辑：
@supports (display: grid) and (not (gap: 1rem))不被任何浏览器支持，得拆成两层@supports
CI 中用 Playwright 启动真实浏览器做样式快照比对
光靠静态分析不够，Safari 15.6 渲染 flex: 1 时因 min-width: auto 导致内容撑开容器，这种 bug caniuse 不标、@supports 也测不出。必须进真实环境验证。Playwright 支持启动指定版本的 Safari、Firefox、Chrome，配合 pixelmatch 或 percy 做像素级比对：
- 只比对关键路径页面（登录页、商品列表、结算页），避免全站截图拖慢 CI
- 基准图必须来自已确认无问题的 Chrome 最新版，而非开发机本地浏览器
- Android WebView（Chrome 70–80）无法用 Playwright 直接启动，得走 BrowserStack 或 LambdaTest 的云设备池，用
webdriverio驱动
把兼容性失败定位到具体 CSS 声明行号
CI 报告里只说“Safari 15.6 样式异常”没用，工程师要立刻知道是哪一行 gap: 1rem 在 Android WebView 里失效。解决方案是在构建阶段给每条 CSS 规则注入 source map 注释，例如：/*# sourceMapping=src/components/Card.css:42:3 */.card { gap: 1rem; }。当快照比对失败时，解析 source map 找到原始文件与行号，直接在 PR 评论里贴出链接和修复建议（比如“此处需降级为 margin，参考 gap 兼容清单第 3 条”）。
最容易被忽略的是：WebView 场景下，gap 不仅无效，还会让父容器 display: flex 的子元素 margin 折叠行为异常——这个细节不会出现在任何公开文档里，只能靠真实设备日志+人工复现确认。自动化流程再强，也得给这类边缘 case 留出人工标注和 bypass 机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
