CSS ::backdrop 상속 변경사항

Bramus

::backdrop의 기록

Fullscreen API에서는 최상위 레이어 및 ::backdrop 요소와 같은 새로운 개념을 도입했습니다.

• 최상위 레이어는 뷰포트 내에서 사용자에게 가장 가까운 위치에 렌더링되는 새로운 스택 레이어입니다. 표시 영역 크기이며 다른 모든 레이어 위에 표시됩니다.
• ::backdrop CSS 가상 요소는 뷰포트 크기의 상자로, 최상위 레이어에 표시되는 요소 바로 아래에 렌더링됩니다.

::backdrop에 대한 원래 사양의 한 가지 기능은 다음과 같습니다.

이 요소는 다른 요소에서 상속받지 않으며 다른 요소에 상속되지도 않습니다.

이는 ::backdrop의 스타일을 격리하는 데 유용했지만 ::backdrop가 :root에 선언된 맞춤 속성에 액세스할 수 없음을 의미하기도 했습니다. 이로 인해 웹 개발자 사이에 혼란이 발생했습니다.

해결 방법으로 맞춤 속성을 사용할 수 있도록 하려면 ::backdrop와 :root에서 맞춤 속성을 명시적으로 선언해야 했습니다.

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

::backdrop 업데이트

::backdrop 관련 문제를 해결하기 위해 CSS 작업 그룹은 이러한 개념을 채택했으며 이제 CSS 위치 지정 레이아웃 사양에 이를 지정했습니다.

정의를 새 사양으로 이전하는 동시에 정의를 수정했습니다.

웹 개발자에게 직접적인 영향을 미치는 한 가지 개선사항은 이제 ::backdrop 요소가 트리를 준수하는 요소라는 점입니다. 즉, 상속 가능한 속성을 출처 요소에서 상속합니다.

이 변경사항으로 인해 특정 요소의 맞춤 속성 값을 재정의할 수 있으며 ::backdrop에서 이 값에 액세스할 수 있게 됩니다. 예를 들어 열린 <dialog> 요소와 연결된 ::backdrop는 이제 해당 <dialog>에서 사용 가능한 맞춤 속성에 액세스할 수 있습니다.

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}