CSS Reference

contain

CSS の封じ込めを指定する

contain プロパティは、ある要素とそのコンテンツが、文書ツリー全体から独立したサブツリーであるとブラウザに認識させる、「封じ込め」を指定します。封じ込めを行うことで、ブラウザのレンダリングが最適化され、パフォーマンスの向上が期待できます。

指定可能な値の構文は下記になります。

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

つまり、

none、strict、content、size、inline-size、layout、style、paint のいずれかを単体で指定する。

もしくは、

size、inline-size のいずれかと、layout、style、paint の中から1つ以上を空白区切りで複数指定する。

のいずれかが選択できます。複数の値を同時に指定する場合は、例えば下記のようになります。

contain: size paint;
contain: size layout paint;
contain: inline-size layout;

指定できる値は下記の通りです。

none 要素は通常どおりにレンダリングされ、封じ込めは行われません。
strict contain: size layout paint style; と同じ意味になります。要素に対してすべての封じ込めが有効になります。
content contain: layout paint style; と同じ意味になります。size 以外の封じ込めが有効になります。
size サイズの封じ込めが行われます。包含ボックス（contain プロパティが指定された要素）は、その子孫要素を調べることなくレイアウトすることができます。
inline-size インライン方向のサイズの封じ込めが行われます。包含ボックスはその子孫要素を調べることなくレイアウトすることができます。
layout レイアウトの封じ込めが行われます。包含ボックスは単体でレイアウトされ、その子孫要素が他のコンテンツのレイアウトに影響を与えたり、逆に外部のコンテンツのレイアウトが、包含ボックスの子孫要素のレイアウトに影響を与えることもありません。
style スタイルの封じ込めが行われます。包含ボックスの内外でスタイルの計算が独立します。これにより、包含ボックスとその子孫要素だけでなく、包含ボックス外の要素に影響を及ぼす可能性のあるプロパティに関して、それらの影響が包含ボックスの外に出ないことが保証されます。
paint ペイントの封じ込めが行われます。包含ボックスの子孫が、その境界の外側には表示されないことが保証されるため、包含ボックスが画面外にある場合や、その他の理由で見えない状態の場合、その子孫も表示されないことが保証され、レンダリングを省力化できます。

containの仕様

初期値
  • none
対象となる要素
  • すべての要素
継承
  • なし

containのサンプルソース

div {
  contain: layout;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome