contain

contain - CSS: カスケーディングスタイルシート | MDN
...
developer.mozilla.org

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

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

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

/* 複数のキーワード */
contain: size paint;
contain: size layout paint;

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

contain プロパティは、以下のうちの一つで指定する。

  • none, strict, content の何れかのキーワードを単独で使用
  • size, layout, style, and paint の各キーワードを 1 つ以上、任意の順序で使用
値効果
noneその要素が通常通り描画され、封じ込めを適用しないことを示す
strictstyle を除くすべての封じ込め規則がその要素に適用されることを示す。これは contain: size layout paint と同等である
contentsize および style 以外の封じ込め規則がその要素に適用されることを示す。これは contain: layout paint と同等である
size子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示す
layout要素の外側が内部のレイアウトなどに影響しないことを示す
styleある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示す。
paintその要素の子孫を、境界の外に表示しないことを示す。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はない。 — そのボックスに完全に含まれていれば、やはり画面外にあるため。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られる。
inserted by FC2 system