content-visibility
content-visibility は CSS のプロパティで、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な抑制のセットを強制することで、必要になるまでユーザーエージェントが大量のレイアウトとレンダリングの作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。
メモ: contentvisibilityautostatechange イベントは、 content-visibility: auto が設定されている要素で、そのレンダリング作業が始まるか、またはスキップされなくなったときに発行されます。これは、アプリのコードがレンダリング処理（例えば <canvas> に描画する）を不要なときに開始または停止する便利な方法を提供し、処理能力を節約します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 85 | 85 | 125 | 18 | 85 | 18 | |
| DOM API | ||||||
| ContentVisibilityAutoStateChangeEvent インターフェイスは element/contentvisibilityautostatechange_event イベントのイベントオブジェクトです。これは、content-visibilityが設定されている要素で、ユーザーとの関連、コンテンツをスキップすることを開始または停止するときに発行されます。 | 108 | 108 | 125 | 18 | 108 | 18 |
| ContentVisibilityAutoStateChangeEvent() コンストラクターは、新しい ContentVisibilityAutoStateChangeEvent オブジェクトのインスタンスを生成します。 | 108 | 108 | 125 | 18 | 108 | 18 |
| skipped は インターフェイスの読み取り専用プロパティで、ユーザーエージェントが要素のコンテンツをスキップする場合は true を返し、そうでない場合は false を返します。 | 108 | 108 | 125 | 18 | 108 | 18 |
| contentvisibilityautostatechange イベントは、content-visibility が設定されている要素に対して、ユーザーとの関連、コンテンツをスキップを開始または停止するときに発行されます。 | 108 | 108 | 130 | 18 | 108 | 18 |
| CSS プロパティ | ||||||
auto | 85 | 85 | 125 | 26 | 85 | 26 |
hidden | 85 | 85 | 125 | 18 | 85 | 18 |
visible | 85 | 85 | 125 | 18 | 85 | 18 |
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (130)
- `oncontentvisibilityautostatechange` イベント ハンドラー プロパティはサポートされていません。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (26)
- スキップされたコンテンツは、ページ内検索では見つけることができません。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (26)
- スキップされたコンテンツは、ページ内検索では見つけることができません。
基本構文
.article-section {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}ライブデモ
実務での使いどころ
-
長いフィードページ
ブログ一覧やSNSフィードなど、大量のコンテンツがあるページの初期レンダリングを高速化する。
-
ヘビーなセクション
画像やグラフを含む重いセクションを画面外のうちはレンダリングスキップし、スクロール時に描画する。
注意点
- contain-intrinsic-size を適切に設定しないと、スクロールバーの長さが不安定になる。
- ページ内検索（Ctrl+F）で content-visibility: auto の要素内のテキストが見つからない場合がある（ブラウザにより異なる）。
アクセシビリティ
- content-visibility: hidden はスクリーンリーダーからもコンテンツを隠すため、display: none と同様の配慮が必要。