W3cubDocs

/Web APIs

ContentVisibilityAutoStateChangeEvent

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ContentVisibilityAutoStateChangeEvent interface is the event object for the contentvisibilityautostatechange event, which fires on any element with content-visibility: auto set on it when it starts or stops being relevant to the user and skipping its contents.

While the element is not relevant (between the start and end events), the user agent skips an element's rendering, including layout and painting. This can significantly improve page rendering speed. The contentvisibilityautostatechange event provides a way for an app's code to also start or stop rendering processes (e.g. drawing on a <canvas>) when they are not needed, thereby conserving processing power.

Note that even when hidden from view, element contents will remain semantically relevant (e.g. to assistive technology users), so this signal should not be used to skip significant semantic DOM updates.

Constructor

ContentVisibilityAutoStateChangeEvent(): Creates a new ContentVisibilityAutoStateChangeEvent object instance.

Instance properties

Inherits properties from its parent, Event.

skipped Read only: Returns true if the user agent is skipping the element's rendering, or false otherwise.

Examples

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

Specifications

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

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`ContentVisibilityAutoStateChangeEvent`	108	108	110	No	94	No	108	108	No	73	No	21.0
`ContentVisibilityAutoStateChangeEvent`	108	108	110	No	94	No	108	108	No	73	No	21.0
`skipped`	108	108	110	No	94	No	108	108	No	73	No	21.0

Constructor

Instance properties

Examples

Specifications

Browser compatibility

See also