Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

contain-intrinsic-size

contain-intrinsic-size は CSS の一括指定プロパティで、要素がサイズ抑制の対象である場合に、ブラウザーがレイアウトに使用する要素のサイズを設定します。

コンテインメントサイズヒント

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
contain-intrinsic-size
83
83
107
17
83
17
その他
css.properties.contain-intrinsic-block-size

contain-intrinsic-block-size は CSS の論理プロパティで、要素がサイズ抑制の対象となっている場合に、ブラウザーがレイアウトに使用することができる要素のブロックサイズを定義します。
95
95
107
17
95
17
CSS プロパティ
none
98
98
107
17
98
17
その他
css.properties.contain-intrinsic-height

contain-intrinsic-height は CSS のプロパティで、要素がサイズ抑制の主体となっている場合に、ブラウザーがレイアウトに使用することができる要素の高さを設定します。
95
95
107
17
95
17
CSS プロパティ
none
98
98
107
17
98
17
その他
css.properties.contain-intrinsic-inline-size

contain-intrinsic-inline-size は CSS の論理プロパティで、要素がサイズ抑制の対象となっている場合に、ブラウザーがレイアウトに使用することができる要素のインラインサイズを定義します。
95
95
107
17
95
17
CSS プロパティ
none
98
98
107
17
98
17
auto none

「自動なし」の値
117
117
117
17
117
17
none
98
98
107
17
98
17
その他
css.properties.contain-intrinsic-width

contain-intrinsic-width は CSS のプロパティで、要素がサイズ抑制の主体となっている場合に、ブラウザーがレイアウトに使用する要素の幅を設定します。
95
95
107
17
95
17
CSS プロパティ
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;
}

ライブデモ

auto 500px

CSS Auto 500px demo.

プレビュー全画面表示

Lock200px

CSS Lock200px demo.

プレビュー全画面表示

width and heightindividualspecified

CSS width and heightindividualspecified demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

  • content-visibility: auto による遅延レンダリングは、ページ内検索（Ctrl+F）で画面外のコンテンツが見つからない問題を引き起こす可能性があります。重要なコンテンツには注意して適用してください。

参考リンク