Newly available Helpful when content-visibility improves stylesheet organization, fallback behavior, or cascade control.

content-visibility

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

Note: The contentvisibilityautostatechange event fires on any element with content-visibility: auto set on it when its rendering work starts or stops being skipped. This provides a convenient way for an app's code to start or stop rendering processes (e.g., drawing on a <canvas>) when they are not needed, thereby conserving processing power.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
content-visibility
85
85
125
18
85
18
DOM API
ContentVisibilityAutoStateChangeEvent

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

The ContentVisibilityAutoStateChangeEvent() constructor creates a new ContentVisibilityAutoStateChangeEvent object instance.
108
108
125
18
108
18
skipped

The skipped read-only property of the interface returns true if the user agent skips the element's contents, or false otherwise.
108
108
125
18
108
18
contentvisibilityautostatechange_event

The contentvisibilityautostatechange event fires on any element with content-visibility set on it when it starts or stops being relevant to the user and skipping its contents.
108
108
130
18
108
18
CSS property
auto
85
85
125
26
85
26
hidden
85
85
125
18
85
18
visible
85
85
125
18
85
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (130)
Implementation note
  • The `oncontentvisibilityautostatechange` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26)
Implementation note
  • Skipped content is not findable via find-in-page.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26)
Implementation note
  • Skipped content is not findable via find-in-page.

Syntax

CSS 
.article-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

Live demo

Auto(delayrendaring)

content-visibility Auto(delayrendaring) demo.

PreviewFullscreen

Hidden(hidden)

content-visibility Hidden(hidden) demo.

PreviewFullscreen

contain-intrinsic-size

content-visibility Contain-intrinsic-size demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use content-visibility to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links