ContentVisibilityAutoStateChangeEvent

Baseline 2024

Newly available

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

関連情報