HTML不支持container属性，容器查询依赖CSS的container-type声明和@container规则，且必须由父级块级元素显式定义；兼容性需用@supports检测，简写语法为container: name / type。
HTML 本身不支持容器查询，container 不是 HTML 属性，也不能写在 <div container="size"> 这类标签里。真正起作用的是 CSS 的 container-type 声明 + @container 规则，且必须由父元素显式定义容器上下文。
container-type 必须写在父元素的 CSS 里，不是 HTML 上
很多人卡在这一步：把 container-type: inline-size 写在子元素上，或者试图用 HTML 属性“开启”容器查询——这完全无效。浏览器只认 CSS 中对**父级块级元素**设置的容器类型声明。
-
container-type: inline-size最常用，只监听宽度变化（适合 flex/grid 横向布局） -
container-type: block-size监听高度，但触发重排风险高，慎用 -
container-type: size同时监听宽高，开销更大，仅在必要时启用 - 没设
container-type的元素，无论嵌套多深，都不会成为容器查询的参考点
@container 只对直接子元素及后代生效，但查询依据是容器尺寸
和媒体查询不同，@container 不关心视口，只看它所绑定的容器实际渲染后的尺寸。注意两个关键限制：
- 查询规则写在子元素选择器里，但生效逻辑由父容器尺寸驱动 —— 比如
.card设了container-type，那@container (min-width: 400px) { .card h2 { ... } }就是合法的 - 如果中间隔了一层没参与布局的 wrapper（比如
display: contents或未设container-type的 div），查询会断掉 - 不能跨 shadow DOM 查询；自定义元素内部需单独声明容器上下文
兼容性处理必须用 @supports，不能靠 class fallback
Chrome 105+、Firefox 110+、Safari 16.0+ 已原生支持，但旧版本或某些 WebView 仍不可用。靠加 class 切换样式是错的，正确做法是用 CSS 特性检测：
立即学习“前端免费学习笔记（深入）”；
@supports (container-type: inline-size) {
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-content {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
}
这样老浏览器会跳过整段，不报错也不影响基础布局。别用 JS 动态加 class 模拟容器查询 —— 性能差、时机难控、无法响应 resize。
简写语法 container: name / type 容易漏掉斜杠
container 是 container-name 和 container-type 的简写，格式严格为 container: <name> / <type>，中间必须有空格 + 斜杠：
- ✅ 正确：
.card { container: card / inline-size; } - ❌ 错误：
.card { container: card inline-size; }（被忽略） - ❌ 错误：
.card { container: card/inline-size; }（缺少空格，部分浏览器解析失败） - 命名不是必需的，无名容器也能用
@container (min-width: ...)，但多人协作时建议命名，避免冲突
最常被忽略的一点：容器查询依赖 Layout API，频繁改变容器尺寸（比如用 JS 批量修改 width）可能触发多次重排+重查，比媒体查询重得多。生产环境优先用 CSS 自适应方案（如 flex-wrap、aspect-ratio）兜底，容器查询只做精准增强。
