[css] content-visibility : 사용자에게 노출되는 화면부터 그리기

정의

사용자의 현재 화면에 보이지 않는 영역은 렌더링을 건너뛰는 속성이다.

이를 통해 초기 페이지 로드 시간을 단축해, 사용자 경험을 개선할 수 있다.

 

사용 방법

우선 각 영역을 section으로 나누고, 나누어진 섹션에 아래 css을 적용시킨다.

content-visibility: auto;            // 브라우저에게 해당 요소가 현재 뷰포트에 보이지 않을 때 렌더링을 건너 뛰기
contain-intrinsic-size: 1000px;    // 스크롤바가 올바르게 뜨기 위해, 요소의 예상 크기를 설정

 

conetent-visibility가 가질 수 있는 값의 종류는?

- visible : 아무런 효과 없음
- hidden : 요소 생략 (dispaly:none처럼, 페이지 내 찾기/user-agent 접근/선택/포커싱 불가)
- auto : 현재 사용자화면에 없다면 요소를 생략합니다.
- 그 외의 전역값인 inherit, initial, revert, revert-layer, unset 을 사용할 수 있음

 

animation은 어떻게 적용하나요?

: transition-behavior:allow-discrete 와 함께 사용해보세요

- hidden ➡️ visible : animation이 0%     시점에 visible로 전환
- visible ➡️ hidden : animation이 100% 시점에 hidden으로 전환

 

 

언제 쓰면 좋을까?

1. 긴 스크롤이 필요한 페이지 (예: 블로그, 뉴스 피드, 제품 목록)
2. 탭 인터페이스나 아코디언과 같은 숨겨진 콘텐츠가 많은 페이지
3. 복잡한 레이아웃과 많은 DOM 요소를 가진 페이지

 

주의할 점

1. content-visibility: hidden 사용시, SEO가 잘 걸리지 않을 수 있으며, layout shift (화면이 뚜둑하고 뜨는 현상)이 발생할 수 있음
2. contain-intrinsic-size 를 설정하지 않으면 스크롤바 크기가 이상하게 뜰 수 있다.

    - 참고) IntersectionObserver, MutationObjserver를 이용하여 요소의 크기를 인라인으로 설정할 수 있음
            - https://infrequently.org/2020/12/resize-resilient-deferred-rendering/

            - https://infrequently.org/2020/12/content-visibility-scroll-fix/

3. 페이지 상단에 있는 요소에 `content-visibility: auto`를 적용하면, 초기 렌더링 시간을 오히려 늘어날 수 있음.

 

 

 

 

 

출처/참고 링크

- https://codepen.io/una/pen/rNxEWLo

Content-visibility Demo: Base (Content Visibility on Grids)

- https://web.dev/articles/content-visibility?hl=ko

콘텐츠 가시성: 렌더링 성능을 향상시키는 새로운 CSS 속성  |  Articles  |  web.dev

- https://developer.mozilla.org/ko/docs/Web/CSS/content-visibility

content-visibility - CSS: Cascading Style Sheets | MDN