Layout containment

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

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

概要

Chrome 52+

Edge 79+

Safari 15.4+

Firefox 69+

Chrome Android 52+

Safari iOS 15.4+

Firefox Android 79+

CSS

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

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

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

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