1. 開発者向けのウェブ技術
  2. Web API
  3. Element
  4. contentvisibilityautostatechange

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: contentvisibilityautostatechange イベント

Baseline 2024
最近利用可能

September 2024以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。

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) {
  // …
}

仕様書

仕様書
CSS Containment Module Level 2
# content-visibility-auto-state-change

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告