content-visibility
Lets the browser skip laying out and painting an element's content while it is off screen — a cheap speed-up for long pages.
Syntax
content-visibility: auto; contain-intrinsic-size: auto 500px;Values
| Parameter | Type | Description |
|---|---|---|
| visible | keyword | The default: content is always rendered. |
| auto | keyword | Content is rendered only when the element is near the screen; it stays findable and accessible. |
| hidden | keyword | Content is never rendered, like `display: none` for the inside, but the element keeps its box and the browser keeps the cached layout. |
Examples
Long article sections rendered only as they approach the screen:
<style>
section {
content-visibility: auto;
contain-intrinsic-size: auto 150px;
border-bottom: 1px solid #ccc; padding: 8px;
}
</style>
<section><h3>Part 1</h3><p>Rendered right away, it is on screen.</p></section>
<section><h3>Part 2</h3><p>Rendered when you scroll close to it.</p></section>
<section><h3>Part 3</h3><p>The same.</p></section>Notes
A skipped element has no content to measure, so its height would collapse to 0 and the scrollbar would jump. contain-intrinsic-size gives it a placeholder size; with auto the browser remembers the real size after the first render. The benefit is noticeable only on big pages. Supported in all current browsers since 2024.
See also
- contain — Promises the browser that an element is independent of the rest of the page, so changes inside it do not force the whole page to be recalculated.
- visibility — Hides an element but keeps the space it occupies.
- display — Decides how an element behaves in the flow and how it lays out its content.
- will-change — Warns the browser that a property is about to change, so it can prepare in advance.
Related recipes
In the tutorial
- Page speed — Fast loading basics for HTML and CSS — render-blocking CSS and critical styles, preload and preconnect, image sizes, loading=lazy and fetchpriority, content-visibility and contain, layout shifts and checking in Lighthouse.