--- title: content-visibility slug: Web/CSS/content-visibility translation_of: Web/CSS/content-visibility ---

{{CSSRef}}

content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。

文法

/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* Global values */
content-visibility: initial;
content-visibility: unset;

値

visible

無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。

hidden

要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、display: noneをコンテンツに与えるのと似ています。

auto

この要素は、レイアウトの封じ込め、スタイルの封じ込め、およびペイントの封じ込めをオンにします。要素がユーザーに関連していない場合は、その内容もスキップします。非表示とは異なり、スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能に対して通常どおり利用可能である必要があり、通常どおりフォーカス可能で選択可能である必要があります。

例

autoを使用して長いページのレンダリングコストを削減

次の例は、autoを使用して画面外のセクションのペイントとレンダリングをスキップする方法を示しています。ビューポート外のコンテンツはレンダリングされないため、これはページの読み込みと操作の両方に役立ちます。

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>...
<section>...
<section>...
<section>...
...

hiddenを使用して手動で可視性を管理

次の例は、スクリプトで可視性を管理できることを示しています。たとえば、display：noneの代わりにcontent-visiblity：hiddenを使用することの追加の利点は、content-visibilityで非表示にしたときにレンダリングされたコンテンツがレンダリング状態を保持することです。これは、コンテンツが再度表示される場合、他のコンテンツよりも速くレンダリングされることを意味します。

<style>
.hidden {
  content-visibility: hidden;
  /* 非表示の場合、要素のサイズを0x500pxサイズの子が1つあるかのようにします */
  contain-intrinsic-size: 0 500px;
}
.visible {
  content-visibility: visible;
  /* これは、.hiddenと.visibleを切り替えるときにレイアウトがシフトしないようにするためです */
  contain: style layout paint;
}



<div class=hidden>...
<div class=visible>...
<div class=hidden>...
<div class=hidden>...

Specifications

Specification Status Comment
{{SpecName('CSS Containment 2', '#content-visibility')}} {{Spec2('CSS Containment 2')}} Initial definition

Browser compatibility

{{Compat("css.properties.content-visibility")}}

See Also