CSS 封じ込めの使用

ウェブページには、論理的には互いに独立した複数の節が含まれていることがよくあります。 CSS の封じ込めにより、レンダリング時に他のセクションを本当に独立して扱うことができます。

例えば、ブログは通常複数の記事を含み、それぞれが下記のマークアップのように見出しとコンテンツを含みます。

<h1>私のブログ</h1>
<article>
  <h2>良い記事の見出し</h2>
  <p>コンテンツはこちら。</p>
</article>
<article>
  <h2>他の記事の他の見出し</h2>
  <p>さらなるコンテンツはこちら。</p>
</article>

CSS では、 contain プロパティに content という値をそれぞれの記事に適用します。 content の値は contain: layout paint style の一括指定です。

article {
  contain: content;
}

論理的には、それぞれの記事はページ上の他の記事から独立しています。この情報は通常、ウェブ開発者がページを作成する際に知っていることであり、明白なことです。 しかし、ブラウザーはコンテンツの意図を知らないので、記事や他のコンテンツの節が完全に自己完結しているとみなすことはできません。

このプロパティは、このことをブラウザーに説明し、パフォーマンスの最適化を明示的に許可する方法を提供します。 これは、要素の内部レイアウトがページの他の部分とは完全に別個のものであり、要素に関するすべてがその境界の内側に描画されることをブラウザーに指示します。目に見えてはみ出すものはありません。

それぞれの <article> に contain: content を設定することで、このことを指示しています。つまり、それぞれの記事が独立していることをブラウザーに指示したのです。ブラウザーはこの情報を使用して、それぞれの <article> コンテンツをどのようにレンダリングするかを決定することができます。例えば、表示可能領域の外にある記事はレンダリングしないかもしれません。

記事がページの終わりに追加されたとき、ブラウザーはレイアウトを再計算したり、先行するコンテンツを再描画する必要はありません。また、封じ込め要素のサブツリーの外側の領域に触れる必要もありません。しかし、ボックスモデルのプロパティが依存関係にある場合、ブラウザーはレイアウトを再計算し、再描画する必要があります。例えば、 <article> のサイズがコンテンツに依存するようにスタイル設定されている場合（例えば height: auto など）、ブラウザーはサイズが変化することを考慮する必要があります。

封じ込めには、レイアウト、描画、サイズ、スタイルの 4 つの種類があります。 containプロパティを使用して、要素に適用する種類を指定します。

レイアウトの封じ込め

article {
  contain: layout;
}

レイアウトは通常、文書全体がスコープになっています。つまり、文書全体の中から 1 つの要素を動かしただけで、すべてが動かされたかのように扱われます。 contain: layout を使うことで、ブラウザーに対して必要な要素のみを伝えることができます。要素の中にあるものはすべてその要素にスコープされ、ページの他の部分には影響せず、包含ボックスは独立した整形コンテキストを確立します。

加えて以下のことが言えます。

• float レイアウトは指定した要素の内部で独立して行われます。
• レイアウトの封じ込めの境界でマージンが相殺されることはありません。
• レイアウトのコンテナーは absolute/fixed で位置指定された子孫要素の包含ブロックになります。
• この包含ボックスは重ね合わせコンテキストを作ります。従って z-index を使用することができます。

描画の封じ込め

article {
  contain: paint;
}

ペイントの封じ込めは、基本的に、ボックスを主要ボックスのパディング境界でクリッピングします。視覚的なはみ出しは行われません。 paint 封じ込めにも layout 封じ込めと同じことが当てはまります（上記を参照）。

もうひとつの利点は、包含ボックスが画面外にある場合、ブラウザーはその内包する要素を描く必要がないことです — これらはそのボックスによって完全に内包されているので、画面外にあるに違いないからです。

サイズの封じ込め

article {
  contain: size;
}

サイズの封じ込めを単独で使用した場合、表示性能の最適化はあまり期待できません。しかし、要素の子のサイズが要素自体のサイズに影響しないことを意味し、そのサイズは子がないものとして計算されます。

要素に contain: size を設定した場合、contain-intrinsic-size または個別指定プロパティ contain-intrinsic-width (en-US) および contain-intrinsic-height (en-US) の順に要素のサイズを指定する必要があります。サイズが設定されていない場合、要素はほとんどの場合ゼロサイズになるというリスクがあります。

article {
  contain: size;
  contain-intrinsic-size: 100vw auto;
}

スタイルの封じ込め

article {
  contain: style;
}

名前に反して、スタイルの封じ込めは、シャドウ DOM や @scope のようにスタイルのスコープを提供するものではありません。主な用途は、 CSS カウンター がある要素で変更され、それがツリーの残りの部分に影響する可能性がある状況を防ぐことです。

contain: style を使用すると、counter-increment と counter-set プロパティがそのサブツリーにのみ限定された新しいカウンターを作成することを保証します。

複数の種類の封じ込めを含めることができます。 contain: layout paintのようにスペースで区切られた複数の値を含めるか、2つの特別な値のいずれかを使用することができます。

特別な値

contain には 2 つの特別な値があり、最初の 3 つまたは 4 つすべての種類の封じ込めを一括指定することができます。

• content
• strict

1 つ目は上記の例で既に見ました。 contain: content を使用すると、 layout、paint、style の封じ込めが有効になります。 size を外しているので、広く適用しても安全な値です。

contain: strict 宣言は、 contain: size layout paint style 宣言（4 つのスペースで区切られた値を記載する）と同じ動作をし、ほとんどの封じ込めを提供します。これは size という封じ込めを適用するために使用することができます。子要素のサイズに依存するため、ボックスのサイズがゼロになってしまう危険性があります。

このリスクを避けるために、 strict を使用するときは常にサイズを設定します。

article {
  contain: strict;
  contain-intrinsic-size: 80vw auto;
}

The above is the same as:

article {
  contain: size layout paint style;
  contain-intrinsic-size: 80vw auto;
}

重い封じ込めから恩恵を受けることができるコンテンツがたくさんあり、それが画面外にあることが多い場合、例えば、ブログの記事がすべて無限にスクロール可能なブログとしてブログのホームページで閲覧可能な場合、 content-visibility: auto を使用することで、すべての封じ込めを一度に適用することができます。

content-visibility プロパティは、要素のコンテナーそのものをすべて描画するかどうかを制御し、強力な一連の封じ込めを強制することで、ユーザーエージェントが必要になるまでレイアウトや描画の大部分を省略することができます。これにより、ユーザーエージェントは必要になるまで要素のレンダリング作業（レイアウトや描画を含む）を省略することができます。

取り得る値は以下の通りです。

• visible: 既定で、要素のコンテンツは通常通りにレイアウトされ、レンダリングされます。
• hidden: この要素はコンテンツをスキップします。スキップされたコンテンツは、ページ内検索やタブ順ナビゲーションなどのユーザーエージェント機能からアクセスすることはできませんし、選択可能にもフォーカス可能にもなりません。
• auto: この要素は、contain: content が設定されているかのように、レイアウトの封じ込め、スタイルの封じ込め、描画の封じ込めをオンにします。要素がユーザーに関連しない場合は、そのコンテンツもスキップします。hidden`とは異なり、スキップされたコンテンツはユーザーとの対話操作に利用でき、フォーカス、選択、通常のタブ操作、コンテンツ内検索が可能です。

ユーザーエージェントには、コンテンツがユーザーに関連しているという概念があります。要素が「ユーザーに関連する」ようになるのは、以下のいずれかが当てはまる場合です。

• 要素がビューポートまたはビューポートの周りのユーザーエージェントが定義したマージン（ビューポート寸法の 50%、要素の可視性が変更されたときにアプリが準備をする時間を与えるため）に現れたとき。
• 要素またはそのコンテンツがフォーカスを受け取ったとき。
• 要素またはそのコンテンツが選択されたとき。例えば、マウスカーソルでテキスト上をドラッグしたり、他にも何らかのハイライト処理によって選択されたりしたとき。
• 要素やそのコンテンツが最上位レイヤーに配置されたとき。

content-visibility: auto が設定されていて、コンテンツがユーザーに関連するとブラウザーが判断した場合、ブラウザーはそのコンテンツをレンダリングします。

要素に content-visibility: hidden を設定すると、ブラウザーにその要素はユーザーに関係ないので、コンテンツをスキップすると指示し、レンダリングしないようにします。これはパフォーマンスの向上に役立ちます。

また、ブラウザーは要素に content-visibility: auto が設定されていて、そのコンテンツがユーザーにとって関連性がないと判断した場合、その要素のコンテンツをスキップします。

要素がコンテンツをスキップするのは次のような場合です。

• レイアウト、スタイル、描画、サイズの封じ込めがオンになっているとき。
• そのコンテンツが、 visibility: hidden が設定されているときのように描画されないとき。
• そのコンテンツが、 pointer-events: none が設定されているときのように、ポインターイベントを受け取らないとき。

これは上記のどちらの場合でも起こりますが、 content-visibility: auto の場合、コンテンツは検索でき、フォーカスを受け取ることができ、関連性のないものから関連性のあるものへと移行することができます。これは content-visibility: hidden では起こりません。

• CSS 封じ込めモジュール
• 学習: CSS のパフォーマンス最適化
• CSS コンテナークエリー
• An Introduction to CSS Containment (Igalia.com, 2019)
• contentvisibilityautostatechange イベント