CSS 包含
CSS 包含模块定义了包含和容器查询。
包含(Containment)能够将页面子树与 DOM 的其余部分隔离。浏览器可以通过优化这些独立部分的渲染来提高性能。
容器查询类似于基于尺寸的媒体查询,不同之处在于,容器查询是基于定义为“包含上下文”的特定容器元素的尺寸,而不是基于视口的尺寸。容器查询能够查询容器的尺寸、属性和属性值,从而有条件地应用 CSS 样式。在应用这些条件样式时,您可以使用容器查询长度单位,这些单位指定相对于查询容器尺寸的长度。还定义了其他属性,以使特定元素能够成为查询容器并为其指定特定名称。
参考
属性
事件
接口
指南
- CSS 容器查询
-
使用
@container进行容器查询的指南,包括命名包含上下文。 - 使用 CSS 隔离
-
描述了 CSS 包含的基本目标,以及如何利用
contain和content-visibility获得更好的用户体验。 - 使用容器大小和样式查询
-
使用
@container编写容器尺寸和样式查询的指南,包括自定义属性的样式查询、查询语法和名称,以及嵌套容器查询。
相关概念
-
CSS 条件规则模块
@containerat-rulecontainer属性container-name属性container-type属性
-
CSS 媒体查询模块
-
CSS 过渡模块
-
CSS 嵌套模块
规范
| 规范 |
|---|
| CSS 包含模块第 2 级 |
| CSS 包含模块级别 3 |