2024年2月15日

CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証

UI開発者佐竹

containプロパティにstyleやsizeを指定した場合に、どうレンダリングされるかをご紹介します。

タイトルを「レンダリングパフォーマンスをアップする」としていますが、今回ご紹介するstyleとsizeはパフォーマンスを向上するものというよりは、包含ブロックの内外でスタイルの計算やサイズの計算を分けることを目的としています。

styleの検証

contain: style;の設定の有無によるcounter()のカウントの違いからStyleの封じ込めを検証します。

1つ目のブロックと2つ目のブロックでスタイルの計算が分かれていないことがわかります。

1つ目のブロック要素にcontain: style;を指定して、包含ブロックとします。

1つ目のブロックと2つ目のブロックでスタイルの計算が分かれている（封じ込められている）ことがわかります。包含ブロック内のスタイルの変更が包含ブロック外のスタイルに影響していません。

1つ目の包含ブロックと2つ目のブロック（包含ブロック外）を入れ替えて確認します。

包含ブロック外のスタイルの変更が包含ブロック内のスタイルに影響していません。

contain: size;の設定の有無によるブロック要素のサイズの違いからSizeの封じ込めを検証します。

containプロパティの設定がないブロックを用意します。ブロック要素にCSSのwidth heightプロパティを使うようなサイズの指定はしません。
クリックするたびに、ブロックに要素を追加するボタンを用意します。

ブロック要素のサイズがブロック内の要素のサイズから計算されていることがわかります。

ブロック要素にcontain: size;を指定して、包含ブロックとします。包含ブロック要素にCSSのwidth heightプロパティを使うようなサイズの指定はしません。

※ 包含ブロック要素にmargin、border、paddingのサイズ指定がある場合は、その指定したmargin、border、paddingのサイズは0にはならずにそのまま残ります。

包含ブロック要素のサイズがブロック内の要素のサイズから計算されていないことがわかります。

包含ブロック要素にCSSのwidth heightプロパティを使ってサイズを指定します。

初期表示
- 包含ブロック要素はCSSのwidth heightプロパティを使って指定したとおりのサイズになります。
- 包含ブロック内の要素は、包含ブロック要素を基準とした相対配置になります。
ボタンをクリックして、ブロックに要素を追加
- 包含ブロック要素のサイズは初期表示と変わりません。

ブロック要素のサイズ計算が行われないということが、必ずしもブロック要素のサイズが0になるということではなく、指定したとおりのサイズになることがわかります。

styleやsizeは包含ブロックの内外でスタイルの計算やサイズの計算を分けることで、計算の影響範囲を限定できます。そのため例えば地図や動画など、サードパーティの埋め込みコンテンツを独立して管理したい場合にも利用を検討したいです。

次回以降のBlogでcontainプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。