content-visibility
content-visibility は、箱の中身を描くかどうかを決めます。auto にすると画面の外にある間は中身の配置や描画を省くので、長いページの最初の表示が速くなります。
構文
visible | auto | hiddenプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow: visible;
height: auto;
content-visibility: hidden;
}コントロール
content-visibilityhidden
解説
値の書き方
visible：ふつうに中身を描きます。初期値です。auto：箱が画面の近くにあるときは中身を描き、画面から離れている間は中身を省きます。いつもcontain: layout style paintと同じ封じ込めが付きます。hidden：中身を描きません。箱そのもの（背景や枠線、padding）は残ります。
中身を省くとどうなるか
中身を省いた箱には、contain: size layout style paint と同じ封じ込めが付きます。大きさは中身が無いものとして決まるので、高さを決めていない箱は padding と枠線だけの高さに縮みます。中身は描かれず、クリックなども受けません。
このページのプレビューは、contain のページと同じく、補助の宣言で overflow: visible と height: auto にしています。hidden では箱が縮んで中身が消えます。auto では箱が画面の中にあるので中身は描かれますが、paint の封じ込めで、右にはみ出した長い URL が切られます。
auto と hidden の違い
autoで省いた中身は、ページ内検索やタブキーでのフォーカス移動、選択の対象のままです。見つかったり、フォーカスが入ったりすると描かれます。hiddenの中身は、display: noneと同じようにページ内検索やフォーカスの対象から外れます。ただし中身のスタイルや状態は保たれるので、隠したり出したりを繰り返す部分に向いています。
気をつけること
autoでは、画面の外の箱は中身の無い高さに縮むので、スクロールするとスクロールバーの長さが変わったり、ページが跳ねたりします。contain-intrinsic-size: auto 500pxのように、描く前の大きさの目安を一緒に書きます。- 主要なブラウザすべてで使えます。Chrome・Edge が 85、Firefox が 125、Safari が 18 から対応しています。ただし Safari 18 では、
autoで省いた中身がページ内検索で見つかりません（26 で直りました）。