Properties

Properties

Editing
  • account_tree
  • bug_report

content-visibility

요소가 콘텐츠를 렌더링할지 여부를 제어하고 강력한 포함 집합을 강제하여 유저 에이전트(user agent)가 필요할 때까지 대규모 레이아웃 및 렌더링 작업을 잠재적으로 생략할 수 있도록 한다.

사용 가능한 값 타입

<'content-visibility'>

DEVDIC-Specified Data Types

content-visibility 속성에 사용되는 타입이다.

  • CSS Containment Module Level 2
    visible | auto | hidden

사용되는 키워드

  • auto

    요소에 대한 layout, style, paint 격리를 활성화한다. 요소가 사용자와 관련이 없는 경우(뷰포트 바깥) 해당 콘텐츠를 건너뛴다.

    hidden과 달리 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent)의 기능을 정상적으로 사용이 가능하다. 그리고 포커스를 맞추고 선택할 수 있다.

  • hidden

    요소의 콘텐츠를 건너뛴다. 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent) 기능에 액세스할 수 없으며 선택 가능하거나 포커스를 맞출 수 없다.

  • visible

    요소의 콘텐츠가 정상적으로 배치되고 렌더링된다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 요소의 콘텐츠가 정상적으로 배치되고 렌더링된다.

  • CSS Containment Module Level 2

    요소에 대한 layout, style, paint 격리를 활성화한다. 요소가 사용자와 관련이 없는 경우(뷰포트 바깥) 해당 콘텐츠를 건너뛴다.

    hidden과 달리 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent)의 기능을 정상적으로 사용이 가능하다. 그리고 포커스를 맞추고 선택할 수 있다.

    이 설정 값은 뷰포트 밖(off screen)의 콘텐츠의 렌더링을 보류하고 뷰포트 내에 진입시 렌더링을 하여 최적화를 만들어 내는 목적을 가지고 있다.

    그러나 유저 에이전트(user agent)별로 확인이 필요할 수 있겠지만 크롬 웹브라우저에서는 필요에 따라서는 뷰포트 밖의 콘텐츠라 하더라도 렌더링을 시도한다. 이는 화면 아래쪽에 위치한 콘텐츠와 연계되는 경우에 렌더링을 미루고 숨기는 것은 콘텐츠의 성능 저하를 발생시킬 수 있다는 이유이다. 최근의 크롬 웹브라우저는 '휴리스틱' 방식으로 뷰포트 밖의 콘텐츠에 대한 가시성을 결정하고 성능을 최적화한다.

    Example
  • 요소의 콘텐츠를 건너뛴다. 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent) 기능에 액세스할 수 없으며 선택 가능하거나 포커스를 맞출 수 없다.

    Example

버전 명세

Modules
Module NameStatusSummary
CSS Containment Module Level 2

Last review date: 2023-1-25

지원 웹브라우저