CSS 封じ込め

CSS 封じ込め (CSS Containment) モジュールでは、封じ込めとコンテナークエリーを定義しています。

封じ込めによって、ページのサブツリーを DOM の残りの部分から分離することができます。ブラウザーは、これらの独立した部分のレンダリングを最適化することで、パフォーマンスを向上させることができます。

コンテナクエリーは寸法のメディアクエリーと似ていますが、クエリーがビューポートの寸法ではなく、封じ込めコンテキストとして定義された特定のコンテナー要素の寸法に基づいている点が異なります。コンテナークエリーにより、コンテナーの寸法、プロパティ、プロパティ値を照会し、条件付きで CSS スタイルを適用することができます。これらの条件付きスタイルを適用するとき、コンテナークエリーの長さの単位を使用することができます。コンテナークエリーの長さの単位は、クエリーコンテナーの寸法に相対する長さを指定します。追加のプロパティを定義することで、特定の要素をクエリーコンテナーとして確立し、それに固有の名前を付けることができます。

リファレンス

プロパティ

アットルールと記述子

関数

データ型

イベント

インターフェイス

ガイド

CSS コンテナークエリー

コンテナーコンテキストに名前を付けることを含む、 @container でコンテナクエリーを使用するガイドです。

CSS 封じ込めの使用

CSS コンテナーの基本的な目的と、より良いユーザー体験のために containcontent-visibility を活用する方法を記述しています。

関連概念

仕様書

Specification
CSS Containment Module Level 2
CSS Containment Module Level 3

関連情報