旧内核会静默丢弃含非法 :is() 或 :where() 的整条 CSS 规则，导致样式块完全失效；应使用 @supports selector(:is(*)) 检测并提供降级方案，确保声明块一致、权重对齐，Ant Design 等框架需关闭默认 :where() 降权。
旧内核直接丢弃整条规则，不是降级而是静默失效
Chrome ≤104、Firefox ≤102、Safari ≤15.3 遇到 :is() 或 :where() 会整条 CSS 规则跳过解析，控制台可能只报模糊的 InvalidSelectorError，不提示位置。这不是“没效果”，是规则根本没进样式表——你写的 @media 块、!important、甚至整个样式块都会消失。
常见诱因包括：:is(.btn, .btn-lg, )（末尾多逗号）、:where(.a::before)（伪元素非法）、:is(:hover)（孤立伪类）——括号内任意一项不合法，整条规则作废。
@supports selector() 是唯一可靠的运行时检测方式
别用 navigator.userAgent 判断 Safari 版本，WebView、Electron、PWA 场景下 UA 极易误判。正确做法是让 CSS 自己检测：
@supports selector(:is(*)) {
.card :is(h1, h2, h3) { margin: 1.25rem 0; }
}
@supports not selector(:is(*)) {
.card h1, .card h2, .card h3 { margin: 1.25rem 0; }
}
注意：@supports selector(:is(*)) 比查 Chrome 版号准得多；但别把 @supports 嵌套在 @media 里——部分旧引擎会直接忽略整块。
立即学习“前端免费学习笔记（深入）”；
- 降级规则必须和增强规则保持完全相同的声明块，否则属性遗漏会导致样式漂移
-
@supports selector(:where(*))同理，用于:where()场景 - 不要写
@supports selector(:is(button, [type="submit"]))——检测项必须是语法合法的最小形式（如*）
手动拆解时权重必须对齐，否则层叠逻辑全乱
:is(.btn, #submit) 权重等同于 #submit（0-1-0），但手写成 .btn, #submit 后，#submit 会压过 .btn，导致你本想统一设置的 cursor: pointer 在 .btn 上被忽略。
安全拆解方案：
- 提权场景（如覆盖第三方）：补外层选择器，例如
body .btn, body #submit - 零权重场景（如重置）：
:where(button)的意图是不抢权，拆解后不能直接写button，得用div button或section button模拟低权重，或加!important（慎用） - 混用时尤其危险：
:is()失效后只剩:where()，而旧内核又不支持:where()，结果两者全丢
Ant Design 等现代框架的兼容性开关要主动配
Ant Design ≥5.0.0 默认用 :where() 封装所有类名以降低优先级，但 Safari ≤15.3 会直接跳过整条规则，导致按钮、输入框等基础组件样式丢失。
解决方案是关闭默认降权：
import { StyleProvider } from '@ant-design/cssinjs';
<StyleProvider hashPriority="high">
<MyApp />
</StyleProvider>
这会让样式从 :where(.css-xxx).ant-btn 变成 .css-xxx.ant-btn，但你要手动检查是否因此引发优先级冲突——比如自定义样式突然被 Ant Design 覆盖。
真正麻烦的不是写错，而是你以为它“只是没生效”，其实它已悄悄破坏了整个层叠顺序。尤其是当你在关键路径上全量替换旧写法，又没做真实设备验证时。
