Zmiany w dziedziczeniu CSS ::backdrop

Bramus

Historia ::backdrop

Interfejs Fullscreen API wprowadził nowe koncepcje, takie jak górna warstwa i element ::backdrop.

• Warstwa górna to nowa warstwa grupowania renderowana najbliżej użytkownika w widocznym obszarze. Ma on rozmiar okna przeglądarki i wyświetla się nad wszystkimi innymi warstwami.
• Pseudoelement ::backdrop w CSS to pole o rozmiarze widocznego obszaru, renderowane bezpośrednio pod każdym elementem prezentowanym w górnej warstwie.

Jedna z funkcji pierwotnej specyfikacji ::backdrop:

Nie dziedziczy po żadnym elemencie ani nie jest po nim dziedziczony.

Chociaż było to przydatne do oddzielenia stylizacji ::backdrop, oznaczało też, że ::backdrop nie miała dostępu do żadnych właściwości niestandardowych zadeklarowanych w :root. Stworzyło to pewne nieporozumienia wśród programistów internetowych.

Aby je udostępnić, musisz zadeklarować je w sekcji ::backdrop i :root:

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

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

Aktualizacja ::backdrop

Aby rozwiązać problemy z ::backdrop, grupa robocza CSS przyjęła te koncepcje i opisała je w specyfikacji CSS Positioned Layout.

Oprócz przeniesienia definicji do nowej specyfikacji, zostały one również dopracowane.

Jednym z udoskonaleń, które ma bezpośredni wpływ na twórców stron internetowych, jest to, że element ::backdrop jest teraz elementem przestrzegającym hierarchii, co oznacza, że dziedziczy wszystkie dziedziczne właściwości od swojego elementu źródłowego.

Obsługa przeglądarek

• 122
• 122
• 120
• 17.4

Dzięki tej zmianie można zastąpić wartości właściwości niestandardowych w określonych elementach, a elementy ::backdrop będą miały do nich dostęp. Na przykład element ::backdrop powiązany z otwartym elementem <dialog> może teraz uzyskiwać dostęp do właściwości niestandardowych dostępnych w tym elemencie.<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);
}

Demo z oknem <dialog>, które otwiera się w górnej warstwie. W Chrome 122 i nowszych ::backdrop może uzyskać dostęp do zmiennej --backdrop-color i użyć jej do nadania koloru tła.