CSS.supports()是同步静态方法，不支持嵌套或异步；@supports才是CSS层首屏降级首选，IE需JS动态注入兼容样式，异步加载由JS主导而非supports。
CSS.supports() 本身不支持嵌套逻辑，也无法异步执行——它是一个同步的、纯静态的 JavaScript 方法，只接受两个字符串参数（属性名和值），立即返回 true 或 false。所谓“嵌套逻辑异步降级加载”，是常见误解，源于混淆了 CSS 的 @supports 规则与 JS 的 CSS.supports()。
真正可行的、分阶段响应浏览器能力的降级加载，需分层协作、各司其职：
@supports 是 CSS 层的同步条件分流器
它在样式解析时即生效，无需 JS，无 FOUC，是首屏降级的首选：
- 把现代特性（如
aspect-ratio、gap、backdrop-filter）写在@supports (property: value)块内 - 把兼容 fallback（如
padding-bottom比例占位、margin模拟 gap、background: rgba()替代 backdrop）直接写在@supports外部 - IE 等不识别
@supports的浏览器会跳过整条规则，自然回退到外部样式
例如：
立即学习“前端免费学习笔记（深入）”；
.card {
padding-bottom: 56.25%; /* fallback for 16:9 */
}
@supports (aspect-ratio: 16/9) {
.card {
aspect-ratio: 16/9;
padding-bottom: 0;
}
}CSS.supports() 是 JS 层的运行时补丁验证器
它适合在 JS 执行后做二次确认或边界兜底，但不能替代 @supports：
- 不用于“嵌套判断”（如
CSS.supports(CSS.supports(...))是语法错误） - 仅用于验证关键特性是否真能渲染，尤其针对 Safari 等声明支持却 buggy 的场景
- 可配合
requestAnimationFrame或Promise.resolve().then()实现微任务级延迟注入（非真正异步加载，而是避免阻塞渲染）
典型用法：
- 检测
gap后，创建临时元素写入gap: 1rem，再读getComputedStyle().gap确认是否生效 - 检测
env(safe-area-inset-top)时，不能只查CSS.supports('inset', '0')，必须真实写入并读回
针对老旧内核（如 IE11）的降级加载必须绕开 @supports
因为 IE 完全忽略 @supports 语法和 CSS.supports() API：
- 默认样式必须是 IE 可解析的（如
float、display: table、带-ms-前缀的flex） - 现代样式只能通过 JS 动态注入，并确保选择器权重一致（避免被默认样式覆盖）
- 若用 CSS-in-JS（如
@ant-design/cssinjs），启用legacyLogicalPropertiesTransformer等转换器，把margin-inline-start自动转为margin-left
异步资源加载应由 JS 主导，而非依赖 supports 逻辑
若需按能力加载不同 CSS 文件或 polyfill：
- 用
CSS.supports()快速筛查关键能力（如'display' in document.documentElement.style+'grid'） - 根据结果调用
import('./modern-layout.js')或loadCSS('grid-polyfill.css') - 注意：这种加载仍是 JS 控制的异步行为，
CSS.supports()本身不提供异步接口
不复杂但容易忽略
