contain

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

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

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

このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。

初期値none
適用対象すべての要素
継承なし
計算値指定値
アニメーションの種類個別

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

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

構文

値

none
その要素が通常通り描画され、抑制を適用しないことを示します。
strict
style を除くすべての抑制規則がその要素を適用されることを示します。これは contain: size layout style paint と同等です。
content
size および style 以外の抑制規則がその要素を適用することを示します。これは 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 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

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

関連情報