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 |