くまだどうも、くまだです。
CSSのcontainプロパティのメモ。
containプロパティとは
contain は、ブラウザに「この要素は外側に影響を与えない」と伝えるCSSプロパティです。
ブラウザは通常、ある要素が変更されると、ページ全体に影響がないか確認しながら再レンダリングします。contain を使うと、その確認範囲を要素の中だけに絞ることができます。
値の種類
実務でよく使うのは contain: content です。layout と paint をまとめて指定できる書き方で、カードリストや動的コンテンツなど変化が多い場面で使います。
/* layoutとpaintをまとめて指定 */
contain: content;
/* layout・paint・sizeをまとめて指定 */
contain: strict;個別の値はこちらです。
| 値 | 内容 |
| layout | 要素内のレイアウト変化が外に影響しないことを伝える |
| paint | 要素の描画が外にはみ出さないことを伝える |
| style | カウンターなどのスタイルが外に影響しないことを伝える |
contain: content;
contain: content;は、例えば以下のようなカードが大量に並んでいるような場面で使用します。
<ul class="card-list">
<li class="card">
<img src="image.jpg" alt="">
<p>テキスト</p>
</li>
<li class="card">...</li>
<li class="card">...</li>
</ul>
.card {
contain: content;
}
1枚のカードに変化があっても、他のカードや外側への影響をブラウザが確認しなくて済むようになります。見た目上の違いは変わらず、内部処理・パフォーマンスに影響があります。
contain: paint;
要素の外にコンテンツがはみ出さないようにします。overflow: hidden に近いイメージです。
<div class="box box--paint">
<div class="overflow-item">はみ出す要素</div>
</div>
<div class="box">
<div class="overflow-item">はみ出す要素</div>
</div>.box {
width: 200px;
height: 100px;
padding: 8px;
border: 2px solid blue;
}
.box--paint {
contain: paint;
}
.overflow-item {
width: 300px;
height: 40px;
background: red;
color: white;
padding: 8px;
}
contain: paint があると .overflow-item が親の外にはみ出さなくなります。
contain: strictや sizeを使うときは幅・高さの指定が必要です。
/* NG：サイズ未指定でstrictを使う */
.box {
contain: strict;
}
/* OK：サイズを指定してから使う */
.box {
width: 300px;
height: 200px;
contain: strict;
}
ここまで読んでくださりありがとうございました。