content-visibility
Optimizes performance by controlling whether an element is rendered. cva(auto) is a modern lazy-rendering technique that skips rendering off-screen content.
Class List
| Class | CSS | Description |
|---|---|---|
cvv | content-visibility: visible | Default. Content is always rendered |
cva | content-visibility: auto | Skips rendering of off-screen content (performance optimization) |
cvh | content-visibility: hidden | Never renders content. State is preserved |
Usage Examples
Significantly improves initial loading performance by skipping rendering of off-screen content on long pages.
<!-- Applied to each section of a long page -->
<section class="cva">
<h2>Section 1</h2>
<p>Skips rendering if off-screen.</p>
</section>
<section class="cva">
<h2>Section 2</h2>
<p>Automatically renders on scroll.</p>
</section>
<!-- Hidden tab content -->
<div class="cvh">
Hidden tab content (rendering skipped, state preserved)
</div>auto vs hidden Comparison
| cva (auto) | cvh (hidden) | |
|---|---|---|
| Rendering | Skips if off-screen, renders if visible | Always skipped |
| Takes up space | Depends on contain-intrinsic-size | 0 (collapsed) |
| scroll | Renders automatically on scroll | Stays hidden even when scrolled |
| Common Use Cases | Performance optimization for long pages | Tab panels, inactive content |
Tips & Notes
Major performance improvement on long pages
cvato each section skips layout calculations for non-visible sections, speeding up initial rendering.
Recommended to use with contain-intrinsic-size
cvamay treat off-screen elements as size 0, causing scrollbar instability. Use contain-intrinsic-size to specify an estimated size.
cvh is different from display: none
cvhskips rendering but the element still exists in the DOM. Note that it is also hidden from the accessibility tree.