CSS コンテナー
CSS コンテナー (CSS Containment) モジュールでは、抑制とコンテナークエリーを定義しています。
抑制によって、ページのサブツリーを DOM の残りの部分から分離することができます。ブラウザーは、これらの独立した部分のレンダリングを最適化することで、パフォーマンスを向上させることができます。
コンテナークエリーは寸法のメディアクエリーと似ていますが、クエリーがビューポートの寸法ではなく、コンテナーコンテキストとして定義された特定のコンテナー要素の寸法に基づいている点が異なります。コンテナークエリーにより、コンテナーの寸法、プロパティ、プロパティ値を照会し、条件付きで CSS スタイルを適用することができます。これらの条件付きスタイルを適用するとき、コンテナークエリーの長さの単位を使用することができます。コンテナークエリーの長さの単位は、クエリーコンテナーの寸法に相対する長さを指定します。追加のプロパティを定義することで、特定の要素をクエリーコンテナーとして確立し、それに固有の名前を付けることができます。
リファレンス
プロパティ
イベント
インターフェイス
ガイド
- CSS コンテナークエリー
-
コンテナーコンテキストに名前を付けることを含む、
@containerでコンテナークエリーを使用するガイドです。 - CSS コンテナーの使用
-
CSS コンテナーの基本的な目的と、より良いユーザー体験のために
containとcontent-visibilityを活用する方法を記述しています。 - コンテナーのサイズおよびスタイルクエリーの使用
-
コンテナーサイズとスタイルクエリーを
@containerで記述する方法についてのガイドです。カスタムプロパティのスタイルクエリー、クエリー構文と名前付き、コンテナークエリーの入れ子などについて記載しています。
関連概念
-
CSS 条件付きルールモジュール
@containerアットルールcontainerプロパティcontainer-nameプロパティcontainer-typeプロパティ
-
CSS メディアクエリーモジュール
-
CSS トランジションモジュール
@starting-styleアットルールtransition-behaviorプロパティ
-
CSS ボックスサイズ設定モジュール
aspect-ratioプロパティcontain-intrinsic-size一括指定プロパティcontain-intrinsic-inline-sizeプロパティcontain-intrinsic-block-sizeプロパティcontain-intrinsic-widthプロパティcontain-intrinsic-heightプロパティ
-
CSS カウンタースタイルモジュール
- CSS カウンターの使用ガイド
-
CSS 入れ子モジュール
仕様書
| Specification |
|---|
| CSS Containment Module Level 2 |
| CSS Containment Module Level 3 |