coderef

content-visibilityBaseline · Newly available

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

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Sep 15, 2025.

Browser support

DesktopChrome
1–107Not supported
108+Supportedsince Nov 29, 2022
Current: 155
Edge
12–107Not supported
108+Supportedsince Dec 5, 2022
Current: 154
Firefox
1–129Not supported
130+Supportedsince Sep 3, 2024
Current: 157
Safari
1–18.6Not supported
26+Supportedsince Sep 15, 2025
Current: 27
MobileChrome Android
18–107Not supported
108+Supportedsince Nov 29, 2022
Current: 155
Firefox Android
4–129Not supported
130+Supportedsince Sep 3, 2024
Current: 157
Safari iOS
1–18.6Not supported
26+Supportedsince Sep 15, 2025
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Sep 15, 2025. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: ContentVisibilityAutoStateChangeEvent.

Feature detection

CSS · check before using
@supports (content-visibility: initial) {
  /* styles that rely on content-visibility */
}

/* or in JavaScript */
if (CSS.supports("content-visibility", "initial")) {
  // use it
}

Sub-features

Support for each part of the feature (8). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
ContentVisibilityAutoStateChangeEvent1081081251810812518
ContentVisibilityAutoStateChangeEvent.ContentVisibilityAutoStateChangeEvent1081081251810812518
ContentVisibilityAutoStateChangeEvent.skipped1081081251810812518
Element.contentvisibilityautostatechange_event1081081301810813018
content-visibility8585125188512518
content-visibility.auto8585125268512526
content-visibility.hidden8585125188512518
content-visibility.visible8585125188512518