contain

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

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

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

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

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

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

メモ: (paint, strict, content のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。

  1. 新しい包含ブロック (position プロパティが absolute または fixed の子孫向け)。
  2. 新しい重ね合わせコンテキスト。
  3. 新しいブロック整形コンテキスト。

構文

値

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
initialChrome 完全対応 1Edge 完全対応 13Firefox 完全対応 19
完全対応 19
未対応 1 — 24
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 15Safari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 19
完全対応 19
未対応 4 — 24
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

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

関連情報

関連トピック