css.supports 不能替代 @supports，因其仅返回布尔值、不触发重绘、无前缀处理、ssr 不可用、ie11 不支持，且易导致水合不一致；唯一适用场景是运行时动态交互逻辑，需配合 class 切换并做 css 层级兜底。
CSS.supports 是 JS 端的特性检测 API，和 @supports 规则语义一致，但执行时机、作用域和兼容性完全不同。它不能“自动”降级——必须配合 class 切换或动态插入样式，否则只是个布尔判断。
为什么不能直接用 CSS.supports 替代 @supports 块
CSS.supports 在 JS 中运行，只返回 true 或 false，不触发样式重绘；而 @supports 是 CSS 原生规则，浏览器解析时就决定是否应用内部样式。IE11 及更早版本完全不支持 CSS.supports（返回 undefined），连基础判断都不可靠。
- 服务端渲染（SSR）场景下，
CSS.supports在 Node 环境中根本不存在，无法执行 - 首屏水合 mismatch 风险高：JS 检测结果晚于 HTML 渲染，可能导致 DOM 与样式状态不一致
- 它不处理前缀逻辑——比如
CSS.supports('backdrop-filter', 'blur(5px)')在 Safari 9 中返回false，但加-webkit-前缀后才生效，而该 API 不自动补前缀
CSS.supports 的唯一合理使用场景
仅适用于需要「运行时动态响应」的交互逻辑，比如根据特性支持情况切换主题类名、加载 polyfill 脚本，或为 Web Components 提供运行时样式分支。
- 必须做兜底：先写基础样式（如
.card { display: block; }），再用 JS 控制增强类：if (CSS.supports('display', 'grid')) document.body.classList.add('supports-grid'); - 避免在
DOMContentLoaded后才操作——应放在内联脚本中，或用document.write注入（仅限非模块化环境） - 检测复合值要拆开：不要写
CSS.supports('font-size', 'clamp(1rem, 3vw, 2rem)')，应检测函数名：CSS.supports('font-size', 'clamp(0, 0, 0)')（参数可填占位值）
老旧内核（IE10/11、Android 4.4 WebView）的真实兼容策略
这些环境不识别 @supports，也不支持 CSS.supports，所以「检测 → 降级」流程必须彻底放弃 JS 运行时路径，回归纯 CSS 层级的渐进增强。
- 把降级样式写在最外层（无
@supports包裹），确保 IE 直接生效；现代样式全部塞进@supports块内 - 禁用所有现代语法降级项：IE11 不理解
gap，所以降级方案里不能出现gap，得用margin；它也不支持aspect-ratio，得用padding-top百分比技巧 - 对
backdrop-filter这类高风险属性，优先用 SVG 模糊滤镜或半透明蒙层降级，而不是依赖 JS 检测——因为 iOS 12.1 以下 Safari 虽支持@supports，但解析嵌套条件极不稳定
真正关键的不是“怎么调用 CSS.supports”，而是接受一个事实：老旧内核的样式降级必须是静态、无 JS 依赖、可被 CSS 解析器直译的。任何试图用 JS 拦截、重写、注入样式的做法，在首屏、SEO、低配设备上都会暴露延迟和失败点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
