Widely available YES。全主要ブラウザで対応済み。パフォーマンス最適化に有効。

CSS Containment

contain は CSS のプロパティで、要素とそのコンテンツが文書ツリーの残りの部分から可能な限り独立していることを示します。 抑制によって DOM のサブセクションを分離することができ、レイアウト、スタイル、描画、サイズ、または任意の組み合わせの計算をページ全体ではなく DOM サブツリーに制限することによって、性能上で有利になります。抑制は、CSS カウンターや引用のスコープにも使用することができます。

パフォーマンス最適化

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
contain
52
79
69
15.4
52
15.4
content
52
79
69
15.4
52
15.4
none
52
79
69
15.4
52
15.4
strict
52
79
69
15.4
52
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Layout, style, and paint */
.widget {
  contain: layout style paint;
}

/* strict: size + layout + style + paint */
.isolated-component {
  contain: strict;
}

/* content: layout + style + paint (excluding size) */
.card {
  contain: content;
}

ライブデモ

contain: layout

CSS Containment Contain: layout demo.

プレビュー全画面表示

contain: content

CSS Containment Contain: content demo.

プレビュー全画面表示

contain: paint

CSS Containment Contain: paint demo.

プレビュー全画面表示

実務での使いどころ

  • 大量要素リストの最適化

    数百のリストアイテムに contain: content を適用し、個別アイテムの変更が他のアイテムの再計算に波及しないようにする。

  • 独立コンポーネントの分離

    ウィジェットやサードパーティ埋め込みに containment を適用し、ホストページへのレイアウト影響を防ぐ。

注意点

  • contain: size を指定した要素は内容に基づくサイズ計算が行われないため、明示的にサイズを指定する必要がある。
  • 誤った containment の指定はレイアウト崩れの原因になる。適用対象を理解してから使用する。

アクセシビリティ

  • contain はレンダリングの最適化ヒントであり、アクセシビリティツリーには影響しない。ただし contain: size でサイズがゼロになり内容が見えなくなる場合は注意。

参考リンク