@supports (container-type: inline-size) 是唯一可靠检测方式，主流浏览器均支持；父容器须显式设该属性且有可计算宽度；降级用 @supports not 块包裹 @media，禁用 js polyfill。
不用脚本检测，也不该用 polyfill 脚本修复。当前（2026 年中）主流浏览器已全面支持 @container，强行加 JS 检测或 polyfill 不仅无效，还会引入样式竞态、内存泄漏和维护黑洞。
为什么 @supports (container-type: inline-size) 就够了
这是唯一被所有支持容器查询的浏览器（Chrome 105+、Firefox 110+、Safari 16.4+、Edge 105+）识别的检测语法。它不依赖 JS 运行时，不破坏 SSR，且浏览器原生跳过不支持的规则块。
-
@supports (@container)、@supports (container: inline-size)等写法全部无效，解析失败，规则被静默丢弃 - 检测必须写在
@container规则外部，不能嵌套在@media里，否则旧浏览器可能误执行降级逻辑 - 降级样式（如回退用的
@media）应放在@supports not (container-type: inline-size)块内，否则新旧浏览器都会应用，造成双重效果
写了 @container 却没反应？先查这三件事
90% 的“不生效”问题跟兼容性无关，而是配置漏项：
- 父元素是否真的设置了
container-type: inline-size？该属性不继承，不能设在body或远祖上 - 父容器是否有可计算宽度？
display: contents、position: absolute、纯width: auto; height: auto的 div 都不会触发 - 父容器是 Flex/Grid 子项时，是否被压缩到
0px宽？检查flex-basis、min-width或grid-column约束
真要兼容 IE 或旧 Edge？用 CSS 降级，别碰 JS
目前没有任何稳定 polyfill 能正确模拟 container-type 的布局隔离与尺寸监听——container-query-polyfill 类库存在 ResizeObserver 漏触发、container-name 失效、React/Vue 更新后需手动 rebuildContainers() 等硬伤。
- 对关键组件，用
@supports not (container-type: inline-size)包裹等效@media回退规则，例如：@supports not (container-type: inline-size) { @media (min-width: 768px) { .card { display: flex; } } } - 避免用
container-type: size（需搭配contain: size），它在旧浏览器 fallback 时最难等效，且影响布局最深 - 如果项目仍需支持 Safari
真正容易被忽略的是：容器查询不是“开了就能用”的开关，而是一套需显式建立上下文的机制；它的价值不在“兼容旧浏览器”，而在让组件脱离视口耦合——这点，JS 脚本永远模拟不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
