@supports必须使用括号包裹完整“属性: 值”对，如@supports (display: grid)✅；@supports display: grid❌因缺括号被忽略，非语法装饰而是解析必需。
直接用 @supports 规则检测，但必须写对声明格式——括号里是完整属性值对，不能只写属性名，也不能加多余括号或省略值。
为什么 @supports (display: grid) 能用，而 @supports display: grid 不行
浏览器解析 @supports 时严格按 CSSOM 规范处理：它只接受「带括号的合法声明字符串」作为条件。括号不是可选装饰，而是语法必需部分。
-
@supports display: grid❌ 缺少括号，整个规则被忽略（等同于无效 CSS） -
@supports (display: grid)✅ 正确，浏览器能识别并执行判断 -
@supports ((display: grid))⚠️ 多余嵌套括号不影响结果，但没必要，且降低可读性
@supports 检测自定义属性（CSS 变量）的坑
检测 --theme-color 是否被支持，不是看变量有没有赋值，而是看浏览器能否解析 --xxx: yyy 这种声明语法。因此必须传完整声明字符串，值不能省略。
- ✅ 正确：
CSS.supports('--theme-color: red')或@supports (--theme-color: red) - ❌ 错误：
CSS.supports('--theme-color')（缺值，返回false） - ❌ 错误：
CSS.supports('(--theme-color: red)')（JS 中加括号反而失效，Safari 16.4–17.3 已确认） - ⚠️ 注意：
CSS.supports('--theme-color', 'red')是双参数形式，在 Safari 16.4–17.3 返回false，务必用单参数
哪些特性不适合用 @supports 直接检测
有些属性虽被声明支持，但渲染行为不一致，@supports 完全无法捕捉——它只管“能不能写”，不管“写了对不对”。
立即学习“前端免费学习笔记（深入）”；
-
@supports (box-sizing: border-box)恒为true（IE8+ 都支持语法），但 IE11 对<input>仍按content-box计算 padding -
@supports (color-scheme: dark)在 Chrome 中可能返回false，只因你把它写在了.class选择器里——该属性只允许出现在:root或 -
@supports (backdrop-filter: blur(1px))可通过，但某些 Android WebView 在transform: scale()下会错误重置滤镜边界
当 @supports 不够用时，该用什么兜底
对关键布局或渲染异常点，纯声明检测不可靠，得结合运行时计算或降级策略。
- 盒模型行为验证：
getComputedStyle(el).boxSizing === 'border-box'看实际计算值，而非仅信@supports - 自定义属性存在性兜底：创建临时元素 →
el.style.setProperty('--test', '1')→getComputedStyle(el).getPropertyValue('--test') === '1' - 老安卓兼容：先检查
el.style.setProperty是否存在，再调用；getPropertyValue必须用，不能用computed['--test'] - CSS 文件加载：别在
@supports块里写@import（语法错误），改用 JS 动态切换link.media或内联关键增强样式
真正容易被忽略的不是语法怎么写，而是检测结果是否真能代表“可用”——@supports 返回 true，只说明浏览器没报错，不保证尺寸、动画、继承或伪元素行为符合预期。
