Size containment
サイズコンテインメントを設定すると、要素のサイズがコンテンツに依存しなくなり、ブラウザはコンテンツの変更時にサイズの再計算をスキップできます。contain-intrinsic-size と組み合わせて推定サイズを提供することが一般的です。大量のデータを表示するテーブルやリストなど、サイズが頻繁に変わるコンポーネントのパフォーマンス最適化に有効です。
概要
サイズコンテインメントを設定すると、要素のサイズがコンテンツに依存しなくなり、ブラウザはコンテンツの変更時にサイズの再計算をスキップできます。contain-intrinsic-size と組み合わせて推定サイズを提供することが一般的です。大量のデータを表示するテーブルやリストなど、サイズが頻繁に変わるコンポーネントのパフォーマンス最適化に有効です。
対応ブラウザ
デスクトップ
Chrome 52+
Edge 79+
Safari 15.4+
Firefox 69+
モバイル
Chrome Android 52+
Safari iOS 15.4+
Firefox Android 79+
基本構文
CSS
.fixed-widget {
contain: size;
width: 300px;
height: 200px;
}実務での使いどころ
-
サイズ固定ウィジェットの最適化
固定サイズのウィジェットに contain: size を適用し、内部コンテンツの変更がレイアウト全体の再計算を引き起こさないようにできます。
注意点
- contain: size を設定した要素に明示的な幅と高さを指定しないと、要素は0x0ピクセルとしてレンダリングされます。必ずサイズを指定してください。
アクセシビリティ
- サイズコンテインメントによりコンテンツがオーバーフローする場合、overflow プロパティで適切なスクロール手段を提供してください。