CSS - contain

• トップ
• CSSリファレンス
• contain

概要

属性名	contain
値	none | strict | content | [ size || layout || style || paint ]
初期値	none
継承	継承しない
サポート	https://caniuse.com/css-containment

説明

ページ全体のレンダリング性能を高めたり、コンテンツの中身が他のコンテンツへの影響することを抑止するための「CSS封じ込め」を行います。

値	説明
none	CSS封じ込めを行いません。
strict	厳密なCSS封じ込めを行います。contain: size layout paint と同義です。
content	通常のCSS封じ込めを行います。contain: layout paint と同義です。
size	要素の大きさが子要素に依存しないことを示します。要素の大きさを計算する際に子要素の大きさを計算しません。
layout	レイアウトの封じ込めを行います。このコンテンツの子要素は他のコンテンツのレイアウトに影響を及ぼさない、また、外部のコンテンツのレイアウトはこのコンテンツの子要素のレイアウトに影響を及ぼさないことを宣言します。
style	スタイルの封じ込めを行います。コンテンツの内外で counter-increment で計算されるカウンター値や、quotes で指定される引用符の関係が影響を及ぼさなくなります。
paint	描画の封じ込めを行います。コンテンツの中身がコンテンツ外にはみ出さないことを宣言します。

使用例

contain: none;		/* デフォルト */
contain: strict;	/* contain: size layout paint; と同義 */
contain: content;	/* contain: layout paint; と同義 */
contain: size;		/* サイズの封じ込め */
contain: layout;	/* レイアウトの封じ込め */
contain: style;		/* スタイルの封じ込め */
contain: paint;		/* ペイントの封じ込め */
contain: size paint;	/* 複数指定 */

サイズの封じ込め

コンテンツ(article)の大きさは通常画像などの子要素の大きさに従い変化します。下記の例では min-height に 5rem を指定していますが、子要素の大きさにより 5rem よりも大きな高さになっています。つまり、子要素の大きさを計算しないと親要素の大きさを決定することができません。

article {
  min-height: 5rem;
  border: 1px solid #999;
}

<article>
  <h2>Article #1</h2>
  <img src="img/sample.png" alt="Sample Image">
</article>

contain: size を指定すると、親要素の大きさを計算する際に子要素の大きさを計算しなくなります。親要素や他要路の描画が早くなりますが、子要素を親要素中の格納するのは製作者の責任となります。contain: paint と組み合わせてもよいでしょう。

article {
  min-height: 5rem;
  border: 1px solid #999;
  contain: size;
}

レイアウトの封じ込め

下記の例では Article#1 の画像に float: left を指定しているために、画像が Article#2 の領域まではみ出してしまっています。

article { border: 1px solid #999; }
img { float: left; }

<article>
  <h2>Article#1</h2>
  <img src="img/sample.png" alt="Sample Image">
  <p>This is article #1...</p>
</article>
<article>
  <h2>Article#2</h2>
  <p>This is article #2...</p>
</article> 

contain: layout を指定することによりコンテンツ内部の要素が他のコンテンツにレイアウト的な影響を及ぼすことを防ぐことができます。

article {
  border: 1px solid #999;
  contain: layout;
}

スタイルの閉じ込め

下記の例では Article の中の h2 によって章番号がインクリメントされ、Chapter 2 が3章になってしまっています。

body { counter-reset: chapter; }
article { border: 1px solid black; margin-left: 1rem; }
h2 { counter-increment: chapter; counter-reset: section; }
h2:before { content: counter(chapter) ". "; }

<h2>Chapter 1</h2>
<article>
  <h2>Article#1</h2>
</article>
<h2>Chapter 2</h2>

contain: style を指定することで、Chapter 2 の章番号が 3 になってしまうのを防ぎます。

article {
  border: 1px solid black;
  margin-left: 1rem;
  contain: style;
}

描画の封じ込め

下記の例では高さ 50px のコンテンツの中に高さ80px の画像を表示しているために画像がはみ出してしまっています。

div.box {
  height: 50px;
  border: 1px solid #ccc;
}

<div class="box">
 <img src="img/sample.png" alt="Sample Image" height=80>
</div>

contain: paint を指定することで子要素がコンテンツをはみ出してしまうのを防ぐことができます。

div.box {
  height: 50px;
  border: 1px solid #ccc;
  contain: paint;
}

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/contain
• https://w3c.github.io/csswg-drafts/css-contain/#contain-property

---