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 | 화면 밖이면 건너뜀, 보이면 렌더링 | 항상 건너뜀 |
| Takes up space | contain-intrinsic-size에 의존 | 0 (축소됨) |
| scroll | 스크롤 시 자동 렌더링 | 스크롤해도 숨김 유지 |
| Common Use Cases | 긴 페이지 성능 최적화 | 탭 패널, 비활성 콘텐츠 |
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.