content-visibility
content-visibility controls whether a box renders its contents at all. With auto, the browser skips laying out and painting the contents while the box is off-screen, so long pages show up faster.
Syntax
visible | auto | hiddenPreview
Code
.box {
overflow: visible;
height: auto;
content-visibility: hidden;
}Controls
About
Values
visible: renders the contents as usual. This is the initial value.auto: renders the contents while the box is on or near the screen, and skips them while it is far away. It always adds the same containment ascontain: layout style paint.hidden: does not render the contents. The box itself (its background, border and padding) stays.
What skipping the contents does
A box that skips its contents gets the same containment as contain: size layout style paint. Its size is computed as if it had no contents, so a box without a set height shrinks to just its padding and border. The contents are not painted and do not respond to clicks.
As on the contain page, the preview uses helper declarations, overflow: visible and height: auto. With hidden, the box shrinks and its contents disappear. With auto, the box is on screen so the contents are rendered, but paint containment clips the long URL that sticks out on the right.
auto versus hidden
- Contents skipped by
autocan still be found with find-in-page, reached with the Tab key and selected. They are rendered once they are found or focused. - With
hidden, the contents are left out of find-in-page and focus, as withdisplay: none. Their styles and state are kept, though, which suits parts that are hidden and shown again and again.
Watch out
- With
auto, off-screen boxes shrink to the height of an empty box, so the scrollbar length changes and the page can jump while scrolling. Add an estimated size for the unrendered state, such ascontain-intrinsic-size: auto 500px. - Works in all major browsers: Chrome and Edge 85, Firefox 125 and Safari 18. In Safari 18, though, contents skipped by
autocannot be found with find-in-page (fixed in Safari 26).