要素のレンダリングを制御し、画面外の要素の処理をスキップしてパフォーマンスを向上させるプロパティです。
content-visibility: visible | hidden | auto任意値: [content-visibility:auto]
専用ユーティリティは無く任意値で書く。
.article {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}長い記事の仮想スクロール最適化
.off-screen {
content-visibility: hidden;
}画面外要素のレンダリングをスキップ
長いページや大量のコンテンツでスクロールパフォーマンスが大幅に向上。
content-visibility: autoには contain-intrinsic-size の併用がほぼ必須です（未描画部分の想定サイズを与えないとスクロールバーが暴れる）。AIはこの相棒を省略しがちです。またAIの知識では「Chrome限定の実験的機能」と古いことがありますが、現在は全ブラウザ対応（Baseline）です。
長いページの初期描画を速くしたい。content-visibility: autoとcontain-intrinsic-sizeのセットで、スクロールバーが暴れないように実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。