旧版浏览器直接忽略 @container 是因语法层面不认识，而非兼容性问题；CSS 规范要求解析器跳过未知 at-rule 整条规则块，不报错也不降级。
旧版浏览器不是“不支持”，而是压根不认识 @container —— CSS 解析器一碰到这个 at-rule 就整条规则跳过，连里面的条件都不解析，也不报错。
为什么 @container 被直接忽略而不是降级？
CSS 规范规定：解析器遇到未知的 at-rule（比如 @container、@layer 早期版本），必须跳过整条规则块，包括大括号内的所有声明。这不是兼容性问题，是语法层面的“不认识”。
-
@supports (container-type: inline-size)能生效，是因为它是已知语法，且被 Chrome 105+/Firefox 110+/Safari 16.4+ 原生识别 -
@supports (@container)或@supports (container: inline-size)全部静默失效——这些写法本身就不合法，解析阶段就被丢弃 - DevTools 里看不到任何匹配提示，不是样式没生效，是规则根本没进样式表树
container-type 是硬性前提，没它就等于没入口
即使浏览器支持 @container，父容器没设 container-type: inline-size，子元素里的所有 @container 规则也照样被忽略。
- 必须在**直接父容器**上显式设置，不能靠继承，也不能设在 body 或远祖节点
-
display: contents、position: absolute、flex 子项被压缩到 0 宽，都会导致inline-size计算为 0，查询永远不触发 -
container-name是可选的，但 Safari 16.4 有命名解析 bug，线上建议优先用匿名容器
JS polyfill 本质是模拟，不是补丁
像 container-query-polyfill 这类方案，不是让旧浏览器“理解” @container，而是用 JS 提取规则、监听尺寸、手动加 class，再靠普通类选择器驱动样式。
立即学习“前端免费学习笔记（深入）”；
- 只支持
container-name和inline-size类型，container-type: size或normal不支持 - 要求你手动给容器加
style="container-name: sidebar;"，不能用container简写属性 - ResizeObserver 在 Edge 16–18 有严重 bug（嵌套容器返回 0），IE11 只能靠
scroll+offsetWidth轮询，CPU 开销高且无法响应 transform 缩放
真正容易被忽略的是临界点误差：polyfill 依赖 getBoundingClientRect() 四舍五入，@container (min-width: 300px) 可能在 299.6px 就触发，导致视觉闪动——这得在真实设备上测，不能只靠 DevTools 模拟。
