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

CSS Containment

大規模なページでは、ある要素の変更が他の要素のレイアウト再計算を引き起こし、パフォーマンスが低下する。contain プロパティで要素の影響範囲を明示的に制限することで、ブラウザがレンダリングを最適化できる。Container Queries の基盤技術でもある。

パフォーマンス最適化

概要

大規模なページでは、ある要素の変更が他の要素のレイアウト再計算を引き起こし、パフォーマンスが低下する。contain プロパティで要素の影響範囲を明示的に制限することで、ブラウザがレンダリングを最適化できる。Container Queries の基盤技術でもある。

対応ブラウザ

デスクトップ

Chrome 52+
Edge 79+
Safari 15.4+
Firefox 69+

モバイル

Chrome Android 52+
Safari iOS 15.4+
Firefox Android 79+

基本構文

CSS 
/* レイアウト・スタイル・ペイントの包含 */
.widget {
  contain: layout style paint;
}

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

/* content: layout + style + paint（size 以外） */
.card {
  contain: content;
}

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク