contain-intrinsic-size | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`contain-intrinsic-size`	83	83	107	17	83	17
`contain-intrinsic-block-size` contain-intrinsic-block-size は CSS の論理プロパティで、要素がサイズ抑制の対象となっている場合に、ブラウザーがレイアウトに使用することができる要素のブロックサイズを定義します。	95	95	107	17	95	17
`none`	98	98	107	17	98	17
`contain-intrinsic-height` contain-intrinsic-height は CSS のプロパティで、要素がサイズ抑制の主体となっている場合に、ブラウザーがレイアウトに使用することができる要素の高さを設定します。	95	95	107	17	95	17
`none`	98	98	107	17	98	17
`contain-intrinsic-inline-size` contain-intrinsic-inline-size は CSS の論理プロパティで、要素がサイズ抑制の対象となっている場合に、ブラウザーがレイアウトに使用することができる要素のインラインサイズを定義します。	95	95	107	17	95	17
`none`	98	98	107	17	98	17
`auto none` 「自動なし」の値	117	117	117	17	117	17
`none`	98	98	107	17	98	17
`contain-intrinsic-width` contain-intrinsic-width は CSS のプロパティで、要素がサイズ抑制の主体となっている場合に、ブラウザーがレイアウトに使用する要素の幅を設定します。	95	95	107	17	95	17
`none`	98	98	107	17	98	17

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

CSS の auto 500px パターンです。

CSS の固定200px パターンです。

CSS の幅と高さ個別指定パターンです。

長いページのスクロールパフォーマンス改善

content-visibility: auto と組み合わせて画面外セクションの推定高さを設定し、レンダリング負荷を軽減しながらスクロールバーの安定性を維持できます。

auto キーワードを使用すると、ブラウザは一度レンダリングした要素のサイズを記憶しますが、初回表示前は指定した値が使用されます。推定値が大きくずれるとスクロール位置がジャンプする可能性があります。