Zmiany w dziedziczeniu CSS ::backdrop

Bramus

Historia ::backdrop

W interfejsie Fullscreen API wprowadzono 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 i nie jest po nim dziedziczona.

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 usługach ::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.

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);
}