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