检测容器查询应使用CSS.supports('container-type: inline-size')，子网格检测用CSS.supports('grid-template-columns', 'subgrid')，组合检测需用括号包裹并用and连接。
检测容器查询：必须用 container-type，不能写 container
CSS.supports() 对容器查询的检测不是“有没有 container 这个词”，而是看浏览器是否实现了可查询容器的底层机制。最稳定、最推荐的写法是：CSS.supports('container-type: inline-size')。这个判断覆盖了 99% 的真实使用场景——只要支持 inline-size 类型，就代表 @container 规则、container-name、尺寸条件（min-width 等）都可用。
常见错误包括：
-
CSS.supports('container', 'fullWidth')—— 参数格式错，返回false -
CSS.supports('container-type: size')——size值目前无实际支持，应写inline-size -
CSS.supports('@container (min-width: 30em) { }')—— 字符串形式的规则块检测尚未被任何主流引擎实现，永远返回false
检测子网格（subgrid）：只认 grid-template-columns: subgrid 这一种写法
子网格的支持检测不能靠 display: grid 或 grid-template-rows 单独判断，因为很多旧版 Grid 支持者根本不认识 subgrid 关键字。唯一可靠的方式是检测子网格专属语法：CSS.supports('grid-template-columns', 'subgrid')。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 必须用两参数形式：
CSS.supports(prop, value)，不能写成CSS.supports('grid-template-columns: subgrid')（单字符串会解析失败） -
grid-template-rows: subgrid同样有效，但检测一个就够了；两者不同时支持的情况在现代浏览器中几乎不存在 - Safari 16.4+ 才开始支持子网格，iOS 16.0–16.3 中即使
@supports返回true，渲染也可能出错，建议加运行时 fallback 校验
组合检测：用 and 连接多个条件时括号不能省
如果需要确认「容器查询 + 子网格」同时可用（比如某个组件同时依赖两者），得用逻辑组合：CSS.supports('(container-type: inline-size) and (grid-template-columns: subgrid)')。
关键细节：
- 每个原子条件必须包裹在括号里，
and前后要有空格，否则解析失败 - 不能写成
CSS.supports('container-type: inline-size and grid-template-columns: subgrid')（缺少外层括号，语法非法） - 这种组合检测结果为
true时，才适合加载高度耦合两特性的 JS 模块；若任一为false，应降级到仅用 Grid 或仅用容器查询的简化逻辑
Android WebView 和 iOS 16 早期小版本的兼容性陷阱
Chrome for Android（尤其是基于旧 Chromium 内核的 WebView）和 iOS 16.0–16.2 的 Safari，虽然部分实现了容器查询 API，但 CSS.supports('container-type: inline-size') 可能返回 false，或返回 true 却无法正确触发 @container 规则。
应对策略：
- 不要把检测结果当作绝对真理，尤其在 hybrid App 场景下；可配合
window.getComputedStyle查某个已设container-type元素的 computedcontainer-type值作二次验证 - 检测为
false时，直接走传统响应式方案（媒体查询 + flex/grid 回退），不要报错、不要中断渲染流程 - 避免在检测通过后立即操作 DOM——某些 WebView 下
@container的首次匹配有延迟，建议加requestAnimationFrame节流再读取布局
