content-visibility

Baseline 2024 *
Newly available

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

content-visibility CSS 속성은 요소가 가진 콘텐츠를 모두 렌더할지 여부를 제어하며, 강력한 독립성 규칙을 통하여 사용자 에이전트가 큰 규모의 레이아웃 및 렌더링을 필요로 할 때까지 이 작업을 잠재적으로 생략할 수 있도록 합니다. 이는 사용자 에이전트가 요소의 렌더링 작업(레이아웃과 페인팅을 포함한)을 필요로 할 때까지는 생략할 수 있게 해주며 이로 인해 초기 페이지를 불러오는 속도를 더 빠르게 합니다.

참고 :> contentvisibilityautostatechange 이벤트는content-visibility: auto 가 적용된 어떠한 요소든 렌더링 작업이 생략되기 시작하거나 끝날 때에 발생합니다. 이는 애플리케이션 코드에 렌더링 절차가 필요하지 않을 때 (예시, <canvas> 에 그림을 그리는 경우) 이 작업을 시작하거나 중단하여 처리 능력을 최적화할 수 있는 편리한 방법을 제공합니다.

시도해보기

구문

css
/* 키워드 값 */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* 전역 값 */
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;

값

visible

아무런 효과도 발생하지 않습니다. 요소의 콘텐츠는 평범하게 렌더됩니다.

hidden

요소가 해당 요소의 컨텐츠를 생략합니다. 생략된 콘텐츠는 페이지 내 찾기나 탭에 의한 네비게이션 등 사용자 에이전트 특성에 접근할 수 없고, 선택되거나 포커스될 수도 없습니다. 요소에 display: none 가 적용된 것과 유사합니다.

auto

요소는 레이아웃 격리, 스타일 격리, 페인트 격리를 활성화합니다. 만일 요소가 사용자와 관계가 없다면, 이 역시 요소를 생략합니다. hidden과는 다르게, 생략된 요소는 여전히 페이지 내 찾기나 탭에 의한 네비게이션 등 사용자 에이전트 특성에 접근이 가능하며, 평범하게 선택되거나 포커스도 가능합니다.

설명

content-visibility 속성에 애니메이션과 전환 적용하기

지원하는 브라우저는 는 비연속 애니메이션 타입의 변형을 사용하여 content-visibility 를 애니메이션/전환합니다.

비연속 애니메이션은 일반적으로 속성이 애니메이션이 진행되는 중간 지점 50% 에서 두 가지 값 사이를 즉각적으로 전환한다는 것을 의미합니다. 하지만 content-visibility 를 사용하는 경우에는 브라우저는 전체 애니메이션 지속 시간 동안 애니메이션 콘텐츠를 보여주기 위해 두 값 사이를 전환합니다. 예시를 확인해 보세요.

  • content-visibility 가 hidden 에서 visible 로 전환된다면, 애니메이션의 0% 시점에서 값이 visible 로 전환되어 애니메이션이 진행되는 동안 내용이 보이게 됩니다.
  • content-visibility 가 visible 에서 hidden 으로 전환된다면, 애니메이션의 100% 시점에서 값이 hidden 으로 전환되어 애니메이션이 진행되는 동안 내용이 보이게 됩니다.

이 동작은 DOM에서 content-visibility: hidden 를 사용하여 요소를 제거하는 진입점이나 마무리 애니메이션을 생성할 때 이를 즉각적으로 사라지게 하는 대신 부드러운 전환(페이드 아웃 등) 을 할 때에 더 유용하게 사용됩니다.

content-visibility 를 CSS 전환과 함께 애니메이션화할 때, transition-behavior: allow-discrete 가 content-visibility 에 설정이 되어 있어야 합니다. 이는 content-visibility 전환을 효과적으로 동작하게 합니다.

참고 : 요소의 content-visibility 값을 전환할 때, display 를 전환할때처럼 @starting-style 블록을 사용하여 전환의 시작 값을 제공할 필요가 없습니다. 이는 content-visibility 가 display 처럼 DOM에서 요소를 숨기지 않고 요소의 콘텐츠 렌더링을 생략하기 때문입니다.

형식 정의

초기값visible
적용대상elements for which size containment can apply
상속no
계산 값as specified
Animation typeDiscrete behavior except when animating to or from hidden is visible for the entire duration

형식 구문

content-visibility = 
  visible  |
  auto     |
  hidden

접근성

content-visibility: auto 속성이 적용된 화면 밖의 콘텐츠는 문서 객체 모델과 접근성 트리 내에 그대로 남아 있습니다. 이를 통해 content-visibility: auto 를 사용해 페이지 성능을 향상시키면서도 접근성에 부정적인 영향을 주지 않을 수 있습니다.

화면 밖의 콘텐츠에 대한 스타일이 렌더링되지 않더라도, 의도적으로 display: none 또는 visibility: hidden 으로 숨긴 요소는 접근성 트리에는 여전히 나타납니다. 접근성 트리에서 요소를 제거하려면 aria-hidden="true" 를 사용하세요.

예제

auto를 사용하여 긴 페이지에서 렌더링 비용 줄이기

다음 예제에서는 content-visibility: auto 를 사용하여 화면 밖의 섹션에 대해 페인팅 및 렌더링을 생략하는 방법을 보여줍니다. 뷰포트에서 벗어난 section 의 콘텐츠는 해당 섹션이 뷰포트 근처로 올 때까지 페인팅이 건너뛰어지며, 이를 통해 페이지 불러오기와 상호작용 성능이 개선됩니다.

HTML

html
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<!-- … -->

CSS

contain-intrinsic-size 속성은 각각의 section 요소에 500px의 기본 높이와 넓이 값을 추가합니다. 요소가 렌더된 이후에도 이는 뷰포트에서 스크롤이 되더라도 원래의 크기를 유지합니다.

css
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

가시성을 위한 hidden 사용하기

다음 예제는 콘텐츠의 가시성을 JavaScript를 이용하여 관리하는 예제입니다. display: none; 을 사용하는 대신 content-visibility: hidden; 를 사용하면 숨겨진 상태에서도 콘텐츠의 렌더링 상태를 유지하며, 렌더링 속도가 더 빠릅니다.

HTML

html
<div class="hidden">
  <button class="toggle">Show</button>
  <p>이 콘텐츠는 초기에는 숨겨져 있지만 버튼을 클릭하여 볼 수 있습니다.</p>
</div>
<div class="visible">
  <button class="toggle">Hide</button>
  <p>이 콘텐츠는 초기에는 보이지만 버튼을 클릭하여 숨길 수 있습니다.</p>
</div>

CSS

content-visibility 속성은 visible 과 hidden 클래스가 적용된 요소의 직속 자식인 단락들에 설정됩니다. 이 예제에서는 부모 div 요소에 적용된 CSS 클래스에 따라 단락 내의 콘텐츠가 보이거나 숨겨질 수 있습니다.

contain-intrinsic-size 속성은 콘텐츠의 크기를 나타내기 위해 포함되었습니다. 이는 콘텐츠가 숨겨질 때 레이아웃 깜빡임을 최소화합니다.

css
p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}

JavaScript

js
const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "Show" : "Hide";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});

결과

content-visibility에 애니메이션 적용하기

이 예제에서는 클릭하거나 아무 키를 눌러 보이거나 보이지 않게 되는 토글 콘텐츠를 가진 <div> 요소가 존재합니다.

HTML

html
<p>
  화면의 아무 곳을 클릭하거나 아무 키를 눌러
  <code>&lt;div&gt;</code> 콘텐츠가 보여지거나 숨겨지는 토글을 동작하게
  해보세요.
</p>

<div>
  여기 애니메이션 <code>&lt;div&gt;</code> 요소가 존재합니다.
  <code>content-visibility: hidden;</code> 그리고
  <code>content-visibility: visible;</code>. 텍스트 색상에 부드러운 애니메이션
  효과를 생성합니다.
</div>

CSS

CSS에서는 <div> 에 초기에 content-visibility: hidden; 를 적용하여 콘텐츠를 숨깁니다. 그리고 @keyframe 애니메이션을 설정하고, 이로 인해 <div> 가 보이거나 숨겨질 수 있도록 클래스에 추가합니다. 이 과정에서 content-visibility 와 색상을 애니메이션화하여 콘텐츠가 보이거나 숨겨질 때 부드러운 애니메이션 효과로 동작할 수 있게 합니다.

css
div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  content-visibility: hidden;
}

/* 애니메이션 클래스 */

.show {
  animation: show 0.7s ease-in forwards;
}

.hide {
  animation: hide 0.7s ease-out forwards;
}

/* 애니메이션 키프레임 */

@keyframes show {
  0% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0%);
  }

  100% {
    content-visibility: visible;
    color: rgb(0 0 0 / 100%);
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: rgb(0 0 0 / 100%);
  }

  100% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0%);
  }
}

JavaScript

JavaScript를 사용하여 .show 및 .hide 클래스를 <div> 에 적절하게 적용하여 보이거나 숨겨지는 상태를 토글할 수 있는 애니메이션을 구현합니다.

js
const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  if (divElem.classList[0] === "show") {
    divElem.classList.remove("show");
    divElem.classList.add("hide");
  } else {
    divElem.classList.remove("hide");
    divElem.classList.add("show");
  }
}

결과

화면에 렌더된 결과는 다음과 같습니다.

명세서

Specification
CSS Containment Module Level 2
# content-visibility

브라우저 호환성

BCD tables only load in the browser

같이 보기