contain-intrinsic-size
サイズコンテインメント（contain: size）が適用された要素は、コンテンツに基づくサイズを持ちません。contain-intrinsic-size を使うと、ブラウザにレイアウト計算のための推定サイズを伝えることができます。特に content-visibility: auto と組み合わせて、画面外の要素のサイズを推定し、スクロールバーの安定性やパフォーマンスを向上させるのに重要です。
概要
サイズコンテインメント（contain: size）が適用された要素は、コンテンツに基づくサイズを持ちません。contain-intrinsic-size を使うと、ブラウザにレイアウト計算のための推定サイズを伝えることができます。特に content-visibility: auto と組み合わせて、画面外の要素のサイズを推定し、スクロールバーの安定性やパフォーマンスを向上させるのに重要です。
対応ブラウザ
デスクトップ
Chrome 83+
Edge 83+
Safari 17+
Firefox 107+
モバイル
Chrome Android 83+
Safari iOS 17+
Firefox Android 107+
基本構文
CSS
.lazy-section {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}実務での使いどころ
-
長いページのスクロールパフォーマンス改善
content-visibility: auto と組み合わせて画面外セクションの推定高さを設定し、レンダリング負荷を軽減しながらスクロールバーの安定性を維持できます。
注意点
- auto キーワードを使用すると、ブラウザは一度レンダリングした要素のサイズを記憶しますが、初回表示前は指定した値が使用されます。推定値が大きくずれるとスクロール位置がジャンプする可能性があります。
アクセシビリティ
- content-visibility: auto による遅延レンダリングは、ページ内検索（Ctrl+F）で画面外のコンテンツが見つからない問題を引き起こす可能性があります。重要なコンテンツには注意して適用してください。