Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Layout containment

レイアウトコンテインメントは、要素の内部レイアウトが外部に影響しない（逆も然り）ことをブラウザに宣言します。これによりブラウザは要素内部の変更時に全体のレイアウト再計算を省略でき、パフォーマンスが向上します。特に動的にコンテンツが変わるウィジェットやカード型のコンポーネントに有効です。

コンテインメントレイアウト分離

対応ブラウザ

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

基本構文

CSS 
.widget {
  contain: layout;
}
.dashboard-card {
  contain: layout style;
}

ライブデモ

contain: layout

CSS の contain: layout パターンです。

プレビュー全画面表示

contain: layout style

CSS の contain: layout style パターンです。

プレビュー全画面表示

封じ込めなし（比較）

CSS の 封じ込めなし（比較） パターンです。

プレビュー全画面表示

実務での使いどころ

  • 独立したウィジェットのレイアウト分離

    ダッシュボードのウィジェットなど、独立したコンポーネントのレイアウトを分離し、内部変更がページ全体の再計算を引き起こさないようにできます。

注意点

  • レイアウトコンテインメントが設定された要素は新しいスタッキングコンテキストと包含ブロックを形成します。position: fixed の子要素の基準が変わる点に注意してください。

アクセシビリティ

  • レイアウトコンテインメントはレンダリング最適化の機能であり、アクセシビリティに直接影響しません。

参考リンク