@supports 必须写在css样式表中，语法需严格正确：括号内为完整声明对、运算符小写且空格规范、不可嵌套或混用@import；检测全局属性需限定作用域，其“支持”仅指语法合法而非实际可用。
@supports 必须写在 CSS 上下文中才能生效，不能塞进 HTML 标签、<script></script> 或 <link> 里；它不是 JS 函数，也不是 HTML 属性，浏览器只在解析样式表时同步执行它。
怎么写才不会被整个忽略
常见失效不是因为浏览器不支持某特性，而是 @supports 语法本身出错，导致整块规则被丢弃：
-
@supports括号内必须是完整声明对，比如(display: grid)✅，不能只写(display)❌ 或(display: "grid")❌（值不加引号） - 括号必须紧贴关键字：
@supports(display: grid)❌（缺空格），@supports (display: grid)✅ - 逻辑运算符
and/or/not必须小写，且前后各一个空格：@supports (display: grid) and (gap: 1rem)✅，@supports (display: grid)AND(gap: 1rem)❌ - 不要在
@supports块里写@import—— 语法非法，整块失效
检测 :has() 这类新伪类要分层验证
@supports selector(:has()) 在 Safari 16.3 及更早版本中会被完全忽略（不是返回 false），而 Safari 16.4+、Chrome 83+、Firefox 69+ 才真正识别该语法。更麻烦的是：:has() 本身在 Safari 中分阶段支持：
- Safari 15.4 支持简单形式如
:has(> img)，但复杂嵌套如:has(+ div, ~ p)仍失败 - 所以应先用最安全的
@supports selector(:has(*))做存在性兜底 - 再叠加具体用法测试，例如
@supports selector(article:has(> h2))，避免把未实现的语法当已支持 - 永远保留 class 驱动的降级方案，别只信
@supports返回的 true
为什么 @supports (color-scheme: dark) 不生效，但 DevTools 里手动加却行
这不是 bug，是设计行为：@supports 检测的是「该声明能否被当前上下文合法接受」，而 color-scheme 只允许出现在 或 :root，若你把它写在普通选择器块里（比如 .theme-toggle { color-scheme: dark }），@supports 就会判为不支持 —— 即使浏览器引擎本身认这个属性。
- 检测前先确认作用域：对全局性属性（如
color-scheme、inert、contain），必须放在:root或对应语义位置测试 - 类似地，
::marker { content: "•" }在 Safari 中虽解析@supports (content: "•")为 true，但实际不渲染，因为content在::marker中根本不受支持 ——@supports只查语法合法性，不查上下文有效性
嵌套 @supports 是个危险动作
虽然 Chrome ≥110、Firefox ≥109 支持嵌套，但 Safari 目前仍不支持，且规范本就不鼓励这种写法。更关键的是，嵌套后浏览器可能把内层条件提到顶层解析，导致逻辑错乱：
- 例如
.card { @supports (backdrop-filter: blur(1px)) { ... } }理论上非法，但所有主流浏览器都容错执行 —— 可结果不可控 - 推荐替代方案：用
@media包裹@supports，即@media (min-width: 768px) { @supports (display: grid) { ... } } - 如果真需多层判断，拆成独立
@supports块比嵌套更稳妥、更易调试
真正棘手的点在于：@supports 的“支持”只是语法层面的“认识”，不是运行层面的“可用”。它不会告诉你 gap 在旧 Safari 里是否和 grid-template-areas 冲突，也不会预警 container-type 在某个安卓 WebView 里解析一半就挂掉 —— 这些都得靠真实设备组合测试补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
