요소가 콘텐츠를 렌더링할지 여부를 제어하고 강력한 포함 집합을 강제하여 유저 에이전트(user agent)가 필요할 때까지 대규모 레이아웃 및 렌더링 작업을 잠재적으로 생략할 수 있도록 한다.
visible | auto | hidden
요소에 대한 layout
, style
, paint
격리를 활성화한다. 요소가 사용자와 관련이 없는 경우(뷰포트 바깥) 해당 콘텐츠를 건너뛴다.
hidden
과 달리 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent)의 기능을 정상적으로 사용이 가능하다. 그리고 포커스를 맞추고 선택할 수 있다.
요소의 콘텐츠를 건너뛴다. 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent) 기능에 액세스할 수 없으며 선택 가능하거나 포커스를 맞출 수 없다.
요소의 콘텐츠가 정상적으로 배치되고 렌더링된다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
요소의 콘텐츠가 정상적으로 배치되고 렌더링된다.
요소에 대한 layout
, style
, paint
격리를 활성화한다. 요소가 사용자와 관련이 없는 경우(뷰포트 바깥) 해당 콘텐츠를 건너뛴다.
hidden
과 달리 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent)의 기능을 정상적으로 사용이 가능하다. 그리고 포커스를 맞추고 선택할 수 있다.
이 설정 값은 뷰포트 밖(off screen)의 콘텐츠의 렌더링을 보류하고 뷰포트 내에 진입시 렌더링을 하여 최적화를 만들어 내는 목적을 가지고 있다.
그러나 유저 에이전트(user agent)별로 확인이 필요할 수 있겠지만 크롬 웹브라우저에서는 필요에 따라서는 뷰포트 밖의 콘텐츠라 하더라도 렌더링을 시도한다. 이는 화면 아래쪽에 위치한 콘텐츠와 연계되는 경우에 렌더링을 미루고 숨기는 것은 콘텐츠의 성능 저하를 발생시킬 수 있다는 이유이다. 최근의 크롬 웹브라우저는 '휴리스틱' 방식으로 뷰포트 밖의 콘텐츠에 대한 가시성을 결정하고 성능을 최적화한다.
요소의 콘텐츠를 건너뛴다. 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent) 기능에 액세스할 수 없으며 선택 가능하거나 포커스를 맞출 수 없다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Containment Module Level 2 | Last review date: 2023-1-25 |