contain

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

その要素が通常通り描画され、抑制を適用しないことを示します。

strict

すべての抑制規則がその要素を適用することを示します。これは contain: size layout style paint と同等です。

content

size 以外の抑制規則がその要素を適用することを示します。これは contain: layout style paint と同等です。

size

子孫の寸法の変更を確認する必要なく、その要素の寸法を変更できることを示します。

layout

要素の外側が内部のレイアウトなどに影響しないことを示します。

style

ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。

paint

その要素の子孫を、境界の外に表示しないことを示します。要素が画面外または非表示の場合、子孫も表示されないことが保証されます。

形式文法

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

仕様書

ブラウザーの対応