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