k8o

はじめに

Safari26のリリースから、Baselineのブラウザセット全てでCSSのcontent-visibilityプロパティにautoプロパティを付与できるようになりました。

visibleやhiddenといった従来の値に加えて、autoを指定することで要素のレイアウトとレンダリングを必要なタイミングまでスキップさせることが可能になりました。

visileとhidden

content-visibilityプロパティは、要素の内容が表示されるかどうかを制御します。

visibleは付与していない時と同じように要素が表示されます。

hiddenはその要素は読み飛ばされます。スクリーンリーダーやブラウザ検索からのアクセスも不可になります。

auto

autoはビューポート内やトップレイヤーに表示されたり、フォーカスや要素の選択がない限り、要素が読み飛ばされます。

ただし、hiddenとは異なり、アクセシビリティツリーに表示されるのでスクリーンリーダーからの検出は行われます。 DOM上にも存在するのでブラウザ検索からのアクセスも可能になります。

要素が読み飛ばされている間は要素の高さが0になるので、読み込まれたタイミングでスクロールバーの位置がズレる可能性があります。 これらの問題は要素のスタイルに適切なcontain-intrinsic-sizeを付与して、あらかじめブラウザにレイアウトのサイズが伝えることで防ぐことができます。

おわりに

content-visibility: autoはBaseline 2025で追加されたのでユーザーの環境ではサポートされていないことが多いです。 しかし、サポートされていないブラウザであっても、このプロパティは付与されていないものと振る舞うだけですので、content-visibility: autoを使用してパフォーマンスの向上が期待できる場合は使用すると良いです。