ContentVisibilityAutoStateChangeEvent

Limited availability

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

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

ContentVisibilityAutoStateChangeEvent インターフェイスは contentvisibilityautostatechange イベントのイベントオブジェクトです。これは、content-visibility: autoが設定されている要素で、ユーザーに関連する、コンテンツをスキップすることを開始または停止するときに発行されます。

要素が関係ない間（開始イベントと終了イベントの間）、ユーザーエージェントはレイアウトと描画を含む要素のレンダリングをスキップします。 これにより、ページのレンダリング速度が大幅に向上します。 contentvisibilityautostatechange イベントは、アプリのコードがレンダリング処理（例えば <canvas> への描画）を不要なときに開始または停止する方法を提供し、処理能力を節約します。

非表示になっても要素のコンテンツは意味づけされたままなので（例えば支援技術のユーザーにとって）、このシグナルは重要な意味づけされた DOM の更新をスキップするために使用すべきではありません。

Event ContentVisibilityAutoStateChangeEvent

コンストラクター

ContentVisibilityAutoStateChangeEvent()

新しい ContentVisibilityAutoStateChangeEvent オブジェクトインスタンスを作成します。

インスタンスプロパティ

親である Event から継承したプロパティがあります。

skipped 読取専用

ユーザーエージェントが要素のレンダリングをスキップする場合は true を返し、そうでない場合は false を返します。

例

js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// キャンバスの更新を始める必要があるときに呼び出されます。
function startCanvasUpdates(canvas) {
  // …
}

// キャンバスの更新を停止する必要がある場合に呼び出されます。
function stopCanvasUpdates(canvas) {
  // …
}

仕様書

Specification
CSS Containment Module Level 2
# content-visibility-auto-state-change

ブラウザーの互換性

BCD tables only load in the browser

関連情報