CSS Content Visibility
The content-visibility property controls whether or not an element renders its contents at all, along with forcing a strong set of containments. This allows the browser to skip the layout and painting work for elements that are not currently on-screen (off-screen), significantly improving initial load performance.
1. The Concept
Traditionally, the browser renders the entire DOM tree, even parts that are far below the fold. With content-visibility: auto, the browser treats off-screen content as if it has visibility: hidden (but better), skipping rendering work until the user scrolls near it.
2. Values
visible(Default): No effect. The element renders normally.hidden: The element skips its contents. The skipped content is not accessible to browser features like find-in-page, tab-order navigation, etc.auto: The element turns on layout containment, style containment, and paint containment. If the element is off-screen, it also turns on size containment and skips painting its contents.
3. Basic Usage
.section {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Important! */
}4. contain-intrinsic-size
When content-visibility: auto skips rendering, the element effectively has a height of 0. This causes scrollbars to jump around as you scroll down and content "pops" into existence.
To prevent this layout shift, you must provide an estimated size using contain-intrinsic-size.
/* Estimate the height of the section */
.card {
content-visibility: auto;
contain-intrinsic-size: 500px;
}You can also specify width and height separately:
contain-intrinsic-size: 300px 500px; /* width height */Or use auto to remember the last rendered size:
contain-intrinsic-size: auto 500px;5. Accessibility
Unlike display: none or visibility: hidden, content hidden by content-visibility: auto remains in the DOM and is accessible to the accessibility tree (AOM) and find-in-page features in modern browsers. When a user searches for text inside a skipped element, the browser automatically renders it and scrolls to it.
6. Browser Support
- Chrome/Edge: Supported.
- Firefox: Supported.
- Safari: Supported (v18+).
It is safe to use as a progressive enhancement. Browsers that don't support it will simply ignore it and render normally.
programming/css/css programming/javascript/vanilla/performance-api programming/javascript/vanilla/intersection-observer