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 Working Group은 이러한 개념을 채택했으며 이제 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);
}