CSS - content-visibility, contain

• content-visibility

content-visibility는 2020년 8월에 Chrome 85에 추가된 CSS 속성이다.
화면 밖 콘텐츠의 렌더링을 생략함으로써 초기 로드 시간을 개선한다.

UserAgent가 layout, painting을 포함한 요소의 렌더링 작업을 필요로 할 때까지 생략할 수 있도록 한다. 또한 화면 내 콘텐츠와 더 빠르게 상호작용할 수 있다.

/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* Global values */
content-visibility: initial;
content-visibility: unset;

visible(초기값)
아무 효과가 없다. 요소의 내용은 정상적으로 배치되고 렌더링된다.

hidden
요소의 내용을 건너뛴다. 건너 뛴 콘텐츠는 사용자 에이전트 기능에 엑세스 할 수 없으며 선택하거나 초점을 맞출 수 없다.

auto
요소는 레이아웃, 스타일을 포함한다. 요소가 사용자와 관련이 없는 경우 해당 콘텐츠도 건너뛴다. hidden과 달리 건너 뛴 콘텐츠에서 사용자 에이전트 기능을 정상적으로 사용할 수 있다.


* 접근성 문제
제목 및 기타 콘텐츠가 화면에서 벗어난 경우, 화면 판독기가 전체 페이지 개요를 읽지 못할 수 있다.

• contain

content-visibility는 CSS Containment Spec에 의존하고 있다. CSS Containment의 핵심이자 목적은 페이지 전체에서 DOM subtree의 분리를 제공하여 렌더링 성능을 향상시키는 것이다.

CSS Containment의 4가지 유형이 있고, 각 유형은 contain 속성의 잠재적 값이며 공백으로 구분하여 조합할 수 있다.

contain: layout;
contain: paint;
contain: size;
contain: style;

layout
conatin 요소의 layout에 대한 분리를 설정한다.
레이아웃은 일반적으로 전체 문서로 범위가 지정되지만, 이 속성값을 사용하면, 브라우저에 이 요소만 확인하면 된다고 알려줄 수 있다. 요소 내부의 모든 항목은 해당 요소로 범위가 지정되고, 페이지의 나머지 부분에는 영향을 주지 않는다.

paint
conatin 요소의 paint에 대한 분리를 설정한다.
기본적으로 박스를 주요 박스의 패딩 경계에 맞춰 채우게 한다. overflow되어 보이는 것이 없게 한다.

size
contain 요소의 size에 대한 분리를 설정한다. 요소의 크기는 자식이 존재하지 않는 것처럼 계산된다. 이 속성값을 적용하면, 이를 적용한 요소의 크기도 지정해야 한다. 수동으로 크기를 지정하지 않으면, 대부분의 경우 크기가 0이 된다.

style
contain 요소의 style에 대한 분리를 설정한다. contain 요소와 하위 요소들에 영향을 미칠 수 있는 속성의 경우 해당 효과가 contain을 벗어나지 않는다.

출처

https://wit.nts-corp.com/2020/09/11/6223?fbclid=IwAR0asl542KhCGImYD5Ct6wojjwQdDR5ZpBKDJ_0jyz4ke9M4Ax6_FzzWlsI
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Containment
https://wit.nts-corp.com/2019/07/08/5594