AAtomic CSS

content-visibility

요소의 렌더링 여부를 제어하여 성능을 최적화합니다. cva(auto)는 화면 밖 콘텐츠의 렌더링을 건너뛰는 모던 lazy-rendering 기법입니다.

클래스 목록

클래스CSS설명
cvvcontent-visibility: visible기본값. 콘텐츠가 항상 렌더링됨
cvacontent-visibility: auto화면 밖 콘텐츠의 렌더링을 건너뜀 (성능 최적화)
cvhcontent-visibility: hidden콘텐츠를 항상 렌더링하지 않음. 상태는 유지

사용 예시

긴 페이지에서 화면 밖 콘텐츠의 렌더링을 건너뛰어 초기 로딩 성능을 크게 향상시킵니다.

<!-- 긴 페이지의 각 섹션에 적용 -->
<section class="cva">
  <h2>섹션 1</h2>
  <p>화면 밖이면 렌더링을 건너뜁니다.</p>
</section>
<section class="cva">
  <h2>섹션 2</h2>
  <p>스크롤하면 자동으로 렌더링됩니다.</p>
</section>

<!-- 비활성 탭 콘텐츠 -->
<div class="cvh">
  비활성 탭의 콘텐츠 (렌더링 건너뜀, 상태 유지)
</div>

auto vs hidden 비교

cva (auto)cvh (hidden)
렌더링화면 밖이면 건너뜀, 보이면 렌더링항상 건너뜀
공간 차지contain-intrinsic-size에 의존0 (축소됨)
스크롤스크롤 시 자동 렌더링스크롤해도 숨김 유지
주요 용도긴 페이지 성능 최적화탭 패널, 비활성 콘텐츠

팁 & 주의사항

긴 페이지에서 큰 성능 향상

cva를 각 섹션에 적용하면 화면에 보이지 않는 섹션의 레이아웃 계산을 건너뛰어 초기 렌더링이 빨라집니다.

contain-intrinsic-size와 함께 사용 권장

cva는 화면 밖 요소의 크기를 0으로 처리할 수 있어 스크롤바가 불안정해질 수 있습니다. contain-intrinsic-size로 예상 크기를 지정하세요.

cvh는 display: none과 다름

cvh는 렌더링을 건너뛰지만 요소는 DOM에 존재합니다. 접근성 트리에서도 숨겨지므로 주의하세요.

displayvisibilityoverflow