@supports not 不能单独用于降级，必须先写基础样式再用它补充兜底；它仅在CSS中生效，IE等旧浏览器会忽略整块规则，且not语法在旧Safari中不稳定。
@supports not 不能直接写在 HTML 标签里，也不能靠它“触发降级动作”——它只是 CSS 规则，只在 <style></style> 或外部 .css 文件中生效，且必须配合“外部降级样式”才能真正起作用。
为什么 @supports not 单独用会失效
常见错误是把降级逻辑全塞进 @supports not 块里，比如：
@supports not (display: grid) {
.container { display: flex; }
}
这看似合理，但实际问题很多：
- IE11 及更早版本完全不识别
@supports，整块规则被忽略，.container可能变成display: initial（通常是inline），布局直接崩 - 某些旧版 Safari（≤12.1）对
not解析不稳定，空格或换行就导致整条规则失效 -
@supports not不是“else 分支”，它只是“当不支持时才应用这些样式”，但你没写基础样式，浏览器就无从 fallback
@supports not 的正确使用姿势
它只适合做“补充性兜底”，不是主降级路径。核心原则：先写所有浏览器都认的样式，再用 @supports not 补少量修复。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 基础样式必须写在最外层、无任何包裹：
.card { padding: 1rem; border: 1px solid #ccc; } -
@supports not (inset: 0)可用于补安全区适配：@supports not (inset: 0) { .header { padding-top: 20px; } }（注意：不能写@supports not (env(safe-area-inset-top))，语法无效） - 避免嵌套：
@supports not (backdrop-filter: blur(1px)) { @supports (filter: blur(1px)) { ... } }在 Safari 14 之前会解析失败 - 值必须合法：
@supports not (color: oklch(0% 0 0))✅，@supports not (color-mix(...))❌（浏览器不识别该特性名）
比 @supports not 更可靠的做法
绝大多数场景下，你应该优先用 @supports (feature) 包现代样式，而不是靠 not 写降级。因为：
-
@supports (display: grid)的兼容性（Chrome 57+、Firefox 61+、Safari 10.1+）远好于not的解析稳定性 - 降级样式写在外面，IE 和 Android 4.4 WebView 等老内核自然生效，无需额外判断
- 不会出现“现代浏览器进了
not块”的反向误判（曾有 Chrome 112 beta 版本短暂误报@supports not (aspect-ratio)） - 服务端渲染（SSR）友好：纯 CSS 方案不依赖 JS 执行时机，避免水合 mismatch
真正难处理的是那些 @supports 本身也检测不了的特性，比如 container-type 或自定义属性动画——这时候连 not 都没得用，只能靠 JS 主动写入 + 读取验证。
