CSS 包含

CSS 包含模块定义了包含和容器查询。

包含(Containment)能够将页面子树与 DOM 的其余部分隔离。浏览器可以通过优化这些独立部分的渲染来提高性能。

容器查询类似于基于尺寸的媒体查询,不同之处在于,容器查询是基于定义为“包含上下文”的特定容器元素的尺寸,而不是基于视口的尺寸。容器查询能够查询容器的尺寸、属性和属性值,从而有条件地应用 CSS 样式。在应用这些条件样式时,您可以使用容器查询长度单位,这些单位指定相对于查询容器尺寸的长度。还定义了其他属性,以使特定元素能够成为查询容器并为其指定特定名称。

参考

属性

事件

接口

指南

CSS 容器查询

使用 @container 进行容器查询的指南,包括命名包含上下文。

使用 CSS 隔离

描述了 CSS 包含的基本目标,以及如何利用 containcontent-visibility 获得更好的用户体验。

使用容器大小和样式查询

使用 @container 编写容器尺寸和样式查询的指南,包括自定义属性的样式查询、查询语法和名称,以及嵌套容器查询。

规范

规范
CSS 包含模块第 2 级
CSS 包含模块级别 3

另见