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

content-visibility

The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.

Syntax and cascade

Overview

The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.

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

Powered by web-features