CSS.supports嵌套检测实现新老浏览器特性无缝降级

利用CSS.supports()进行嵌套检测，其核心目标并非简单的层级嵌套，而是依据浏览器能力断层实现分层决策。具体逻辑是：先确认基础API是否可用，再逐项测试关键特性，最后动态注入对应样式。需要注意，像IE11这类浏览器会直接跳过整个CSS.supports调用，因此第一层检测必须作为兜底判断，否则后续逻辑无法执行。

第一层：确认环境是否支持 CSS.supports

此步是基础。老旧内核（如IE11、部分旧版QQ浏览器）不认识CSS.supports这个API，直接调用会报错或返回undefined。因此，不能跳过这一步直接检测某个CSS属性。

• 判断逻辑：typeof CSS === 'undefined' || !CSS.supports。若结果为真，说明浏览器不具备检测能力，必须立即进入全量降级模式。
• 此时应注入一套纯粹的CSS2.1兼容样式。例如，用float布局替代grid，用margin-left替代margin-inline-start，用filter: alpha(opacity=)模拟opacity。
• 注意：在降级分支中，避免写入任何现代语法（如gap、aspect-ratio），因为老浏览器会直接忽略不认识的规则，导致样式缺失。

第二层：对支持 supports 的环境进行细粒度特性检测

对于Chrome 88+、Safari 14+、Edge 79+等支持CSS.supports的现代浏览器，仍需进一步处理。它们对新属性的支持程度参差不齐，因此不能只测一个属性就下结论，而应按照功能依赖链进行分层检测。

• 先测布局基础：例如CSS.supports('display', 'grid')。若连display: grid都不支持，则无需再检测grid-gap或subgrid。
• 再测逻辑属性：例如CSS.supports('margin-inline-start', '1rem')。Safari 15.6及更早版本对inset-inline-start等属性的支持不稳定，单独检测更为准确。
• CSS变量需单独验证：使用CSS.supports('color', 'var(--primary)')。因为CSS原生的@supports ( --foo: red )规则在部分Safari版本中可能无效，在JavaScript层进行检测反而更可靠。

第三层：动态注入时保持选择器权重一致

需注意：降级样式不是对现代样式的“补充”，而是“替代”。若为现代浏览器写的样式选择器是.card，则降级样式也必须使用.card，不能改为.legacy .card或#app .card。否则，在老旧浏览器中，降级样式可能被更高权重选择器意外覆盖。

• 推荐统一使用组件层级的class（例如Button-root），让现代样式和降级样式都直接作用于同一选择器。
• 若使用CSS-in-JS库（如@ant-design/cssinjs），可考虑关闭:where()封装，并启用类似legacyLogicalPropertiesTransformer的转换器，自动处理逻辑属性。
• 尽量避免在同一个样式文件中混用CSS的@supports规则和JavaScript动态注入的样式，因为加载顺序不同可能导致难以预料的样式冲突。

配合HTML类名实现变量降级兜底

CSS自定义属性（变量）的检测是特例。单纯依赖CSS的@supports规则并不稳定，尤其在Safari 13.1及更早版本中表现异常。更可控的方案是在JavaScript层检测后，通过切换HTML类名实现降级。

• 当检测到CSS变量不支持时，给元素添加类名，例如no-cssvars。
• 在CSS中编写：.no-cssvars .btn { background: #007bff; }，而不是依赖.btn { background: var(--primary, #007bff); }的fallback写法。
• 这样做的优势在于：即使浏览器完全忽略var()语法，降级颜色仍能通过类名选择器生效。而后者在部分Safari版本中可能连整条规则一起被丢弃。