content-visibility
==================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

**メモ:** `contentvisibilityautostatechange` イベントは、 `content-visibility: auto` が設定されている要素で、そのレンダリング作業が始まるか、またはスキップされなくなったときに発行されます。これは、アプリのコードがレンダリング処理（例えば `<canvas>` に描画する）を不要なときに開始または停止する便利な方法を提供し、処理能力を節約します。

構文
--


```css
/\* キーワード値 \*/
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/\* グローバル値 \*/
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;
```

### 値

`visible`

効果なし。要素の内容物は通常通りにレイアウトおよび描画されます。

`hidden`

要素はその内容物を読み飛ばします。読み飛ばされた内容物は、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能でアクセス可能になることはなく、また選択可能やフォーカス可能にもなりません。これは、内容物に `display: none` を設定することに似ています。

`auto`

この要素の、レイアウトの封じ込め、スタイルの封じ込め、描画の封じ込めをオンにします。要素がユーザーに関連していない場合、その内容の読み飛ばしも行われます。 hidden の場合とは異なり、読み飛ばされた内容物は、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能で通常通り利用可能となり、通常通りフォーカスや選択が可能になります。

解説
--

### content-visibility のアニメーションとトランジション

対応しているブラウザーは `content-visibility` を離散アニメーション型のバリエーションでアニメーション/トランジションさせます。

離散アニメーションは一般的に、アニメーションの 50% でプロパティが 2 つの値の間を反転することを意味しています。しかし、 `content-visibility` の場合、ブラウザーはアニメーションの間中、 2 つの値を反転させてアニメーションコンテンツを表示させます。例えば、このようになります。

* `content-visibility` を `hidden` から `visible` にアニメーションさせる場合、アニメーション時間の `0%` で `visible` に値が切り替わるので、その間ずっと表示されます。
* `content-visibility` を `visible` から `hidden` にアニメーションさせる場合、アニメーション時間の `100%` で `hidden` に値が反転するので、その間ずっと表示されます。

この動作は、例えば、 `content-visibility: hidden` で DOM から何かコンテンツを除去したいが、すぐに消えてしまうのではなく、（フェードアウトのように）スムーズに遷移させたい場合に、ビュートランジションのアニメーションを作成するのに有益です。

CSS トランジションで `content-visibility` をアニメーションさせる場合、 `content-visibility` に `transition-behavior: allow-discrete` (en-US) を設定する必要があります。これにより、 `content-visibility` トランジションが有効になります。

**メモ:** 要素の `content-visibility` 値をトランジションさせるとき、 `display` をトランジションさせるときのように、 `@starting-style` (en-US) ブロックを使用して、トランジションするプロパティの開始値の集合を提供する必要はありません。これは `content-visibility` が `display` のように要素を DOM から隠すのではなく、要素のコンテンツのレンダリングをスキップするだけだからです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `visible` |
| 適用対象 | elements for which size containment can apply |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | Discrete behavior except when animating to or from `hidden` is visible for the entire duration |

形式文法
----
```

content-visibility =   
  visible  |  
  auto     |  
  hidden     
  
```

アクセシビリティの考慮
-----------

`content-visibility: auto` プロパティ内にあるオフスクリーンコンテンツは、ドキュメントオブジェクトモデルとアクセシビリティツリー内に残ります。これにより、アクセシビリティに悪影響を与えることなく、 `content-visibility: auto` でページのパフォーマンスを改善することができます。

 オフスクリーンコンテンツのスタイルはレンダリングされないので、 `display: none` や `visibility: hidden` で意図的に非表示にした要素はアクセシビリティツリーに現れます。
 要素をアクセシビリティツリーに現れたくない場合は、 `aria-hidden="true"` を使用してください。

例
-

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

 次の例では、`content-visibility: auto` を使用して、オフスクリーンセクションの描画をスキップしています。
 セクション`がビューポートの外にある場合、セクションがビューポートに近づくまでコンテンツの描画はスキップされます。この章はページの読み込みと対話することの両方に役立ちます。

#### HTML


```html
<section>
  <!-- 各節の内容… -->
</section>
<section>
  <!-- 各節の内容… -->
</section>
<section>
  <!-- 各節の内容… -->
</section>
<!-- … -->
```


#### CSS

`contain-intrinsic-size` プロパティは、それぞれの `section` 要素の高さと幅に 500px の既定値を追加します。節がレンダリングされた後、ビューポートの外にスクロールされても、レンダリングされた内在サイズを保持します。


```css
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
```

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

 次の例では、JavaScript でコンテンツの可視性を管理する方法を示します。
 `display: none;` の代わりに `content-visibility: hidden;` を使用することで、非表示時のコンテンツの描画状態が保持され、描画が高速になります。

#### HTML


```html
<div class="hidden">
  <button class="toggle">表示</button>
  <p>
    このコンテンツは初期状態では非表示になっており、ボタンをクリックすることで表示させることができます。
  </p>
</div>
<div class="visible">
  <button class="toggle">非表示</button>
  <p>
    このコンテンツは初期状態では表示されており、ボタンをクリックすることで非表示にすることができます。
  </p>
</div>
```


#### CSS

`content-visibility` プロパティは、 `visible` クラスと `hidden` クラスを持つ要素の直接の子である段落に設定します。この例では、親 div 要素の CSS クラスに応じて、段落内のコンテンツを表示させたり非表示にしたりすることができます。

コンテンツのサイズを表すために `contain-intrinsic-size` プロパティを記載しています。これは、コンテンツを非表示にしたときのレイアウトのずれを縮小するのに役立ちます。


```css
p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}
```


#### JavaScript


```js
const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "表示" : "非表示";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});
```


#### 結果

### content-visibility のアニメーション

この例では、 `<div>` 要素があり、そのコンテンツはクリックや任意のキーを押すことで表示・非表示を切り替えることができます。

#### HTML


```html
<p>
  Click anywhere on the screen or press any key to toggle the
  <code>&lt;div&gt;</code> content between hidden and showing.
</p>

<div>
  This is a <code>&lt;div&gt;</code> element that animates between
  <code>content-visibility: hidden;</code>and
  <code>content-visibility: visible;</code>. We've also animated the text color
  to create a smooth animation effect.
</div>
```


#### CSS

CSS では、最初に `<div>` に `content-visibility: hidden;` を設定し、そのコンテンツを隠します。次に `@keyframe` アニメーションを設定し、 `<div>` を表示させたり非表示にしたりするためのクラスに取り付けて、 `content-visibility` と `color` をアニメーション化することで、コンテンツが表示/非表示になる滑らかなアニメーション効果が得られます。


```css
div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  content-visibility: hidden;
}

/\* アニメーションクラス \*/

.show {
  animation: show 0.7s ease-in forwards;
}

.hide {
  animation: hide 0.7s ease-out forwards;
}

/\* Animation keyframes \*/

@keyframes show {
  0% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0);
  }

  100% {
    content-visibility: visible;
    color: rgb(0 0 0 / 1);
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: rgb(0 0 0 / 1);
  }

  100% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0);
  }
}
```


#### JavaScript

最後に、JavaScript を使用して `.show` クラスと `.hide` クラスを `<div>` に適用し、表示状態と非表示状態の切り替えに応じてアニメーションを適用します。


```js
const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  if (divElem.classList[0] === "show") {
    divElem.classList.remove("show");
    divElem.classList.add("hide");
  } else {
    divElem.classList.remove("hide");
    divElem.classList.add("show");
  }
}
```


#### 結果

表示結果は次のようになります。

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 2 # content-visibility |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS 封じ込め
* `contain-intrinsic-size`
* `contentvisibilityautostatechange`
* content-visibility: the new CSS property that boosts your rendering performance (web.dev)