@supports条件必须是完整“属性: 值”对，值需合法且浏览器可识别；and/or/not需严格括号嵌套；selector()和font-tech()有版本限制；css.supports()需先检测存在性且参数顺序固定。
@supports 条件必须是完整声明，不能只写属性名
常见错误是写成 @supports (display) 或 @supports (grid-area) —— 这会直接被浏览器忽略，因为 @supports 要求括号内是可解析的「属性: 值」对，不是语法检查，而是运行时支持判定。值必须是该属性合法的、浏览器能识别的语法形式。
比如检测 font-variation-settings，得写 @supports (font-variation-settings: normal)，而不是 @supports (font-variation-settings: "wght 400") —— 后者引号内不是标准值，解析失败，整个条件判为 false。
再比如检测 aspect-ratio，必须用有效数值： @supports (aspect-ratio: 16/9)，而 @supports (aspect-ratio: auto) 在部分旧版 Safari 中不成立（即使它语法合法），因为支持度按实际渲染能力判定，不是按 CSS 语法规范。
and / or / not 的括号规则容易出错
not 单独用在最外层时可以省括号：@supports not (display: grid) 合法；但一旦参与组合，就必须加外层括号：@supports (display: flex) and not (gap: 1rem) ❌ 错误，正确写法是 @supports (display: flex) and (not (gap: 1rem))。
or 不是所有浏览器都默认支持空格分隔的简写，尤其在早期 Chromium 版本中，@supports (width: fit-content) or (width: -webkit-fit-content) 可能被跳过，稳妥写法是加括号并显式用 or：@supports ((width: fit-content) or (width: -webkit-fit-content))。
多个 and 可以省括号，但混用时建议统一加：例如 @supports (display: grid) and (gap: 1rem) and (place-items: center) 没问题，但若中间插入 not，不加括号极易漏判。
selector() 和 font-tech() 等函数语法有明确版本门槛
@supports selector(A > B) 在 Chrome 108+、Firefox 108+ 才稳定支持，旧版会整条规则失效（不是报错，是静默跳过）。这意味着你不能靠它降级处理子选择器兼容性 —— IE 完全不识别 @supports，Edge 12–18 也不支持 selector()。
@supports font-tech(color-svg) 或 @supports font-format(woff2) 这类判断，依赖底层字体引擎，Chrome 106 开始支持 font-tech()，但 Safari 目前（2026 年 4 月）仍不支持该函数，只认 font-format()。所以用 font-tech(color-emoji) 做 fallback 时，Safari 会直接走 else 分支，哪怕它其实能渲染彩色 emoji。
这些函数不是“语法糖”，它们触发的是浏览器真实的字体技术探测逻辑，性能开销略高于普通属性检测，高频切换场景（如滚动中动态加载字体）需留意。
CSS.supports() 与 @supports 行为一致，但 JS 层要防 undefined
CSS.supports('display', 'grid') 和 @supports (display: grid) 判定逻辑完全一致，返回值也相同。但它在 IE 11 及更早版本中是 undefined，不是 false —— 所以不能直接 if (CSS.supports(...))，得先判存在：if (CSS.supports && CSS.supports('color', 'rebeccapurple'))。
另一个坑是传参顺序：CSS.supports('filter', 'blur(2px)') 正确，但 CSS.supports('blur(2px)', 'filter') 会返回 false，参数不可互换。传表达式字符串时，括号是强制的：CSS.supports('(transform: scale(1)) and (will-change: transform)')，少一对括号就返回 false。
最后注意：这个 API 不会触发重排或样式计算，只是查表，所以可放心在 requestIdleCallback 或初始化阶段调用，但别在每帧动画里反复调 —— 没必要，结果不会变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
