CSS.supports仅检测语法支持，无法确保渲染可用；需结合@supports静态判断与JS实测渲染效果，再通过类名控制降级样式，避免FOUC及合成层陷阱。
为什么 CSS.supports("backdrop-filter", "blur(1px)") 不够用
它只检测语法支持，不保证渲染可用。比如旧版 Safari（iOS 15.2 前）和微信 X5 内核会返回 true，但实际完全忽略该属性；Edge 18–90 声称支持，却在某些组合下崩溃或静默失效。这不是 bug，是浏览器主动降级策略。
双保险检测：语法 + 渲染链验证
先用 @supports 做静态判断，再用 JS 插入临时元素实测是否真能模糊背景内容。关键不是“有没有这个 CSS 属性”，而是“当前环境能否完成 backdrop 合成”。
- 插入一个
position: fixed、background: rgba(255,255,255,0.01)的全屏元素，加backdrop-filter: blur(1px) - 在其内部放一段带对比色的文字（如黑字白底），再在它下方固定位置放一个纯色块作为“背景层”
- 用
getComputedStyle检查该元素是否被浏览器主动禁用（Chrome/Safari 中表现为backdrop-filter: none或值为空字符串） - 更可靠的做法：截图比对或监听
resize后强制重绘，观察文字边缘是否出现高斯晕染——但这需 Canvas，线上慎用
JS 动态启用降级的最小闭环
别等页面加载完才判断，应在 DOMContentLoaded 阶段就完成检测并挂载类名，避免 FOUC 或样式抖动。
if (CSS.supports('backdrop-filter', 'blur(1px)') &&
CSS.supports('(-webkit-backdrop-filter: blur(1px))') &&
!CSS.supports('not (-webkit-backdrop-filter: blur(1px))')) {
document.documentElement.classList.add('supports-backdrop-filter');
} else {
document.documentElement.classList.add('no-backdrop-filter');
}
然后在 CSS 中写：
立即学习“前端免费学习笔记（深入）”；
.card { background: rgba(255, 255, 255, 0.8); }
.supports-backdrop-filter .card { backdrop-filter: blur(4px); }
.no-backdrop-filter .card { background: rgba(255, 255, 255, 0.6); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
注意：box-shadow 是最轻量、兼容性最好的视觉降级手段，比模拟模糊的 filter 更稳。
容易被忽略的合成层陷阱
即使检测通过，backdrop-filter 仍可能在运行时被浏览器静默禁用——尤其当父容器有 overflow: hidden、clip-path、transform: translateZ(0) 或 isolation: isolate 时。DevTools 里看到 backdrop-filter 样式被划掉，就是这个原因。
- 不要给模态框父遮罩层设
overflow: hidden，改用inset: 0+contain: layout paint控制范围 - 避免在
position: sticky或频繁滚动区域使用 >6px 的 blur 值，iOS Safari 会直接切回静态快照 - 动态修改
backdrop-filter强度（如拖拽调节）时，优先用 CSS 变量：backdrop-filter: blur(var(--blur, 4px))，而非 JS 直接写el.style.backdropFilter
真正难的不是“怎么开模糊”，而是“怎么让模糊在各种边界条件下不崩、不卡、不消失”。
