Element: contentvisibilityautostatechange イベント

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

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

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

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

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("contentvisibilityautostatechange", (event) => {});
oncontentvisibilityautostatechange = (event) => {};

メモ: イベントオブジェクトの型は ContentVisibilityAutoStateChangeEvent です。

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);
  }
}

// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
  // …
}

// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
  // …
}

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contentvisibilityautostatechange event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

関連情報