@supports 只在 CSS 上下文中生效，必须置于块或外部.css文件中；括号内须为完整声明对，逻辑运算符需规范空格与括号，且检测为true不保证实际渲染有效。
@supports 不能写在 HTML 标签里，也不能用 <link> 或 <script></script> “调用”——它只在 CSS 上下文中生效，必须放在 <style></style> 块内或外部 .css 文件中。
为什么@supports写在<style></style>外就失效
浏览器解析 HTML 时，<style></style> 标签内的内容交给 CSS 解析器处理；而 <link rel="stylesheet"> 加载的文件也走同一套流程。但一旦把 @supports 放到 里、塞进 <script></script>、或者当成属性写在 <div> 这种地方，CSS 解析器根本不会看到它——直接跳过或报解析错误。
<p>常见误操作包括：</p>
<ul>
<li>在 <code> 里写 <link rel="stylesheet" href="main.css" grid> —— 属性无效，被忽略
<script></script> 中拼字符串：document.write('@supports (inset: 0) { ... }') —— 不是合法 CSS 上下文，不执行@supports 当成 HTML 指令，试图用它控制元素渲染顺序 —— 它不参与 DOM 构建，只影响样式应用时机
@supports括号里必须写完整声明对
语法上，@supports 后面的括号里必须是一个**合法的 CSS 声明对**，即 property: value 形式，不能只写属性名，也不能漏空格或括号。
立即学习“前端免费学习笔记（深入）”；
这些写法会失败：
-
@supports (display)❌ 缺值，语法错误，整个块被丢弃 -
@supports(display: grid)❌ 括号紧贴关键字，部分浏览器（如旧版 Safari）拒绝解析 -
@supports (backdrop-filter: blur(1px))❌ 应优先用标准名backdrop-filter，前缀写法（-webkit-backdrop-filter）多数浏览器不认 -
@supports (aspect-ratio: 1/1)✅ 但 Safari 15.4 之前不支持，写了也没用
组合条件时 and/or/not 的空格和括号陷阱
逻辑运算符不是 JS 那套，and 和 or 前后必须有空格，not 单独用不用括号，嵌套时才需要。
正确写法示例：
-
@supports (display: grid) and (gap: 10px)✅ -
@supports not (user-select: none)✅ -
@supports (display: grid) and not (container-type: inline)✅（not部分必须包在括号里） -
@supports ((display: grid) or (display: flex)) and (inset: 0)⚠️ 语法合法但可读性差，建议拆成两个独立块
错误写法：
-
@supports (display: grid)and(gap: 10px)❌ 缺空格，Chrome 可能容忍，Firefox 直接跳过 -
@supports not display: grid❌not后没括号，语法错误
检测结果为 true 不等于能用
@supports 判断的是“这个声明我认不认识”，不是“这个声明在这个上下文里能不能正常渲染”。比如：
-
@supports (content: "•")在 Safari 中返回true，但li::marker { content: "•" }实际不生效，仍显示圆点 -
@supports (color-scheme: dark)在 Chrome 120+ 返回false，因为该声明只允许出现在:root或，写在普通选择器里就算语法合法也会被拒 -
@supports (box-sizing: border-box)恒为true（IE8+ 都支持），但 IE11 对<input>的box-sizing行为仍是 content-box
真正关键的不是“浏览器说它支持”，而是“你写的这条规则，在你写的那个选择器里，是否真能按预期渲染”。这点最容易被忽略。
