容器查询

容器查询：子容器基于父容器（container） 的尺寸来应用样式。适用于组件级别的样式调整。

定义容器

为父元素声明容器类型和名称 container-name，使其成为子元素的查询目标。

• none 默认值。查询容器没有名称。

• <custom-ident> 用于标识容器的区分大小写的字符串。以下条件适用：

  • 名称不能等于or、and、not或default。
  • 名称值不能用引号括起来。
  • 虚线标识旨在表示作者定义的标识符（例如，--container-name）是允许的。
  • 允许使用由空格分隔的多个名称的列表。

容器类型

container-type属性可以从下面的列表中获取一个值，或者两个值-其中一个必须是scroll-state，另一个可以是inline-size或size。换句话说，元素可以被建立为大小查询容器、滚动状态查询容器、两者或两者都不。

• inline-size：基于容器的内联轴尺寸（水平方向，对应 width）。
• size：基于容器的宽度和高度（双向响应）。
• scroll-state：基于容器上的滚动状态。
• normal：默认值，不作为查询容器。

缩写

以container的形式使用 container: <name> / <type>

使用容器查询

在子元素的 CSS 中，通过 @container 规则监听父容器的变化。

不设置name时，监听body的变化。

容器查询中的逻辑关键字

逻辑关键字可用于定义容器条件：

• and 并且，组合两个或多个条件。
• or 或者，组合两个或多个条件。
• not 否定条件。每个容器查询只允许一个“not”条件，并且不能与and或or关键字一起使用。

容器查询单位

cqw：容器宽度的 1%（类似 vw，但基于容器而非视口）。

cqh：容器高度的 1%。

cqi：容器内联尺寸的 1%（水平方向）。

cqb：容器块尺寸的 1%（垂直方向）。

描述符

大小容器描述符

• aspect-ratio 容器的aspect-ratio计算为容器的宽度与高度之比。
• block-size 容器的block-size
• height 容器的高度
• inline-size 容器的inline-size
• orientation 容器的方向，landscape或portrait
• width 容器的宽度

滚动状态容器描述符

• scrollable 确定是否可以通过用户发起的滚动（例如通过拖动滚动条或使用触控板手势）在给定方向上滚动容器。换句话说，在给定的方向上是否有溢出的内容可以滚动到。

• snapped 查询容器是否已或将沿着给定轴捕捉到滚动捕捉容器祖先。

• stuck 查询position值为sticky的容器是否粘在其滚动容器祖先的边缘。

注意事项

1. 避免循环依赖

   • 容器查询不应依赖其内部元素的尺寸变化，否则会导致无限循环。

2. 性能优化

   • 避免过度使用容器查询，尤其是在高频变化的动态布局中。

3. 浏览器兼容性

   • 支持情况：Chrome 105+、Firefox 110+、Safari 16+。
   • 兼容方案：使用 @supports 提供降级样式。