これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS の contain プロパティは、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から独立していることを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことができます。

/* キーワード値 */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;

/* グローバル値 */
contain: inherit;
contain: initial;
contain: unset;

このプロパティは、数多くのウィジェットを含むページで、あるウィジェットの CSS 規則がページの他の部分の変更の影響を受けないように完全に独立させることができるので有用です。

初期値none
適用対象すべての要素
継承なし
メディアすべて
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

none
その要素が通常通り描画され、抑制を適用しないことを示します。
strict
すべての抑制規則がその要素を適用することを示します。これは contain: size layout style paint と同等です。
content
size 以外の抑制規則がその要素を適用することを示します。これは contain: layout style paint と同等です。
size
子孫の寸法の変更を確認する必要なく、その要素の寸法を変更できることを示します。
layout
要素の外側が内部のレイアウトなどに影響しないことを示します。
style
ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。
paint
その要素の子孫を、境界の外に表示しないことを示します。要素が画面外または非表示の場合、子孫も表示されないことが保証されます。

形式文法

none | strict | content | [ size || layout || style || paint ]

仕様書

仕様書 状態 備考
CSS Containment Module Level 1 勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 19
完全対応 19
未対応 1 — 24
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 15Safari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 19
完全対応 19
未対応 4 — 24
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,