css.supports()要求严格语法匹配：单参数必须为完整声明字符串（如'display: flex'），组合条件需括号包裹（如'(display: grid) and (gap: 1rem)'），容器查询应检测'container-type: inline-size'，且需手动fallback。
CSS.supports() 能用，但写错就永远返回 false —— 关键在语法是否严格匹配规范，不是“差不多就行”。
检测单个属性+值必须带完整声明字符串
很多人误以为 CSS.supports('display', 'flex') 和 CSS.supports('display: flex') 等价，其实前者在部分浏览器（如 Safari 16.4）会返回 false，后者才稳定可靠。规范明确要求：传单参数时，必须是合法的 CSS 声明字符串（property + colon + space + value），不能拆成两个参数。
- ✅ 正确：
CSS.supports('display: flex')、CSS.supports('aspect-ratio: 16/9')、CSS.supports('container-type: inline-size') - ❌ 错误：
CSS.supports('display', 'flex')（iOS 16.2–16.4 下失效）、CSS.supports('gap', '1rem')（Safari 15.6 不认） - ⚠️ 注意：
font-variation-settings这类带函数值的属性，必须写全：CSS.supports('font-variation-settings: normal')，不能省略normal或写成'font-variation-settings: wght 700'（部分旧 Chrome 会拒识）
组合条件必须加括号且逻辑清晰
用 and/or/not 时，括号不是可选的装饰，而是解析器识别复合条件的必需分隔符。漏括号或嵌套混乱，结果直接为 false。
- ✅ 正确：
CSS.supports('(display: grid) and (gap: 1rem)')、CSS.supports('(container-type: inline-size) and (container: main)') - ❌ 错误：
CSS.supports('display: grid and gap: 1rem')（语法非法）、CSS.supports('(display: grid) and gap: 1rem')（右半无括号，被忽略） - ? 小技巧：不确定是否要括号？统一加上最安全；
not必须包在最外层：CSS.supports('not (display: table)')，不能写成CSS.supports('not display: table')
容器查询等新特性检测有特殊语法陷阱
容器查询不是靠 container 属性值判断的，它依赖 @container 规则的整体能力。浏览器只在支持完整解析链（类型声明 + 名称绑定 + 条件匹配）时才返回 true。
- ✅ 推荐检测项：
CSS.supports('container-type: inline-size')—— 最基础、覆盖 99% 实际使用场景 - ✅ 组合检测：
CSS.supports('(container-type: inline-size) and (container: fullWidth)') - ❌ 绝对别写：
CSS.supports('container', 'fullWidth')（永远false）、CSS.supports('container-name: fullWidth')（该属性不存在，规范没这玩意） - ⚠️ 注意：Android WebView 和 iOS 16.0–16.3 的某些小版本会错误返回
false，检测失败时应默认走传统响应式布局，不要中断 JS 执行或报错
兼容性短板和 fallback 必须手动兜底
CSS.supports() 在 IE 完全不可用，Edge 12+、Chrome 28+、Firefox 22+、Safari 9+ 支持良好，但低版本 Safari 对新特性（如 view-transition-name）识别滞后，不能当作“绝对权威”。
- ? 不要单独依赖它做核心功能开关，比如用它决定是否初始化某个组件 —— 检测失败时，得有预设的降级行为
- ✅ 推荐做法：CSS 层先写好
@supports回退样式，JS 层仅用CSS.supports()做轻量级决策，例如打点统计、加载非关键资源、或切换 class 触发动画 - ? 兜底方案示例：
if (!CSS.supports || !CSS.supports('contain: paint')) { element.classList.add('no-contain-paint'); }—— 把!CSS.supports当作 IE 判断入口
真正麻烦的从来不是“怎么写对”，而是“浏览器说支持了，但实际渲染行为不一致”——比如 Safari 16.4 声称支持 scrollbar-gutter，却在某些 flex 容器里失效。这种时候，CSS.supports() 只能帮你跨过第一道门，门后还得靠真实 DOM 测试和视觉回归校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
