要素のレイアウトとレンダリングを必要なタイミングまでスキップさせるCSSのcontent-visibilityプロパティ
CSSのcontent-visibilityプロパティは、要素のレンダリングを制御しパフォーマンスを向上させる機能です。auto値を指定することで、ビューポート外の要素のレイアウト処理を必要なタイミングまでスキップできます。
はじめに
Safari26のリリースから、Baseline 2025にcontent-visibilityプロパティのautoプロパティが仲間入りしました。
visibleやhiddenといった従来の値に加えて、autoを指定することで要素のレイアウトとレンダリングを必要なタイミングまでスキップさせることが可能になりました。
visileとhidden
content-visibilityプロパティは、要素の内容が表示されるかどうかを制御します。
visibleは付与していない時と同じように要素が表示されます。付与しても効果が全くありません。
hiddenはその要素のレンダリング処理が行われません。スクリーンリーダーやブラウザ検索からのアクセスも不可になります。
display: noneと似ていますが、content-visibility: hiddenは要素のレイアウト情報を保持するので、要素が再び表示される際にレンダリングが不要になるという違いがあります。
auto
autoはビューポート内やトップレイヤーに表示されたり、フォーカスや要素の選択がない限り、要素のレンダリング処理が行われません。
逆に、要素がビューポート内に入ったり、トップレイヤーに表示されたり、フォーカスや要素の選択が行われた場合にレンダリング処理が行われます。
そして非表示の間もhiddenとは異なり、アクセシビリティツリーに表示されるのでスクリーンリーダーからの検出は行われます。また、ブラウザからの検索も問題なく行われます。
content-visibilityのhiddenとautoの比較
content-visibility: hidden
content-visibility: auto
サンプルコンテンツ
このコンテンツはcontent-visibility: autoによって制御されています。ビューポート外の要素のレンダリング処理を必要なタイミングまでスキップできます。
上記のデモでは、hiddenとautoの違いを実際に確認できます。
ブラウザの検索機能や開発者ツールでアクセシビリティツリーを確認してみると、autoの方だけ検索できることがわかります。
要素が読み飛ばされている間は要素の高さが0になるので、読み込まれたタイミングでスクロールバーの位置がズレる可能性があります。
これらの問題は要素のスタイルに適切なcontain-intrinsic-sizeを付与して、あらかじめブラウザにレイアウトのサイズが伝わるようにして防ぎます。
おわりに
content-visibility: autoはBaseline 2025で追加されたのでユーザーの環境ではサポートされていないことが多いです。
しかし、サポートされていないブラウザであっても、このプロパティは付与されていないものと振る舞うだけですので、content-visibility: autoを使用してパフォーマンスの向上が期待できる場合は使用してみてはいかがでしょうか。