CSS 包含

CSS 包含模組定義了包含和容器查詢。

包含(Containment)能夠將頁面子樹與 DOM 的其餘部分隔離。瀏覽器可以透過最佳化這些獨立部分的渲染來提高效能。

容器查詢類似於基於尺寸的媒體查詢,不同之處在於,容器查詢是基於定義為“包含上下文”的特定容器元素的尺寸,而不是基於視口的尺寸。容器查詢能夠查詢容器的尺寸、屬性和屬性值,從而有條件地應用 CSS 樣式。在應用這些條件樣式時,您可以使用容器查詢長度單位,這些單位指定相對於查詢容器尺寸的長度。還定義了其他屬性,以使特定元素能夠成為查詢容器併為其指定特定名稱。

參考

屬性

事件

介面

指南

CSS 容器查詢

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

使用 CSS 隔離

描述了 CSS 包含的基本目標,以及如何利用 containcontent-visibility 獲得更好的使用者體驗。

使用容器大小和樣式查詢

使用 @container 編寫容器尺寸和樣式查詢的指南,包括自定義屬性的樣式查詢、查詢語法和名稱,以及巢狀容器查詢。

規範

規範
CSS 包含模組第 2 級
CSS 包含模組級別 3

另見