CSS Reference

content-visibility

要素がその内容をレンダリングするかしないかを制御する

content-visibility プロパティは、要素の内容をレンダリング（描画）するかどうか、そして要素のコンテンツに強力な封じ込め（Containment / 他の要素への影響を制限すること）を適用するかを制御します。これにより、ブラウザが必要になるまでレイアウトやレンダリングの作業を省略することが可能となり、パフォーマンスを向上させることができます。

指定できる値は下記の通りです。

visible 何も変わりません。要素の内容は通常通りにレイアウト、レンダリングされます。（既定値）
hidden 要素の内容が完全にスキップされ、レンダリングされません。スキップされた内容は、ユーザエージェントの機能（例えばページ内検索やタブによるナビゲーションなど）ではアクセスできず、選択やフォーカスもできません。display: none; を指定した場合と似た動作ですが、要素自体は存在していて、ただその内容のレンダリングがスキップされるという点が異なります。
auto 要素の contain プロパティの値が変更され、その要素に対してレイアウト、スタイル、 ペイントの各封じ込めが適用されます。
要素がユーザーにとって表示が必要でない場合、その内容もスキップされますが、hidden とは異なり、スキップされた内容はページ内検索、タブによるナビゲーション、フォーカス、選択などのユーザエージェントの機能からはアクセス可能です。

パフォーマンスの向上が期待できるのは、auto 値の指定が行われたときでしょう。例えば要素が画面外にあるなど、ユーザーがまだそのコンテンツを必要としていない場合、ユーザエージェントはその部分のレンダリングを停止することで、初回のページ読み込み速度を向上させるといった効果が期待できます。

例えばとても縦に長いWebコンテンツなどの場合、ビューポートに入るまでに多くのスクロールを要する位置にあるコンテンツには content-visibility: auto; を指定しておく、といった使用方法が想定されます。

content-visibilityの仕様

初期値
  • visible
対象となる要素
  • サイズ封じ込めを適用できる要素
継承
  • なし

content-visibilityのサンプルソース

content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome