Zmiany w dziedziczeniu CSS ::backdrop

Bramus

Historia: ::backdrop

W interfejsie Fullscreen API wprowadziliśmy nowe koncepcje, takie jak górna warstwa i element ::backdrop.

• Górna warstwa to nowa warstwa warstwowa renderowana najbliżej użytkownika w widocznym obszarze. Ma rozmiar widocznego obszaru i wyświetla się nad wszystkimi innymi warstwami.
• Pseudoelement CSS ::backdrop to pole o rozmiarze widocznego obszaru, renderowane bezpośrednio pod dowolnym elementem widocznym w górnej warstwie.

Jedną z funkcji pierwotnej specyfikacji ::backdrop było:

Nie jest dziedziczona z żadnego elementu i nie jest dziedziczona.

Było to przydatne do wyodrębnienia stylu elementu ::backdrop, ale oznaczało też, że ::backdrop nie ma dostępu do żadnych właściwości niestandardowych zadeklarowanych w :root. Spowodowało to pewne nieporozumienia wśród programistów stron internetowych.

Aby obejść ten problem, trzeba było wyraźnie zadeklarować właściwości niestandardowe zarówno w ::backdrop, jak i w :root, aby je udostępnić:

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

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

Aktualizacja: ::backdrop

Aby rozwiązać problemy z elementem ::backdrop, grupa robocza ds. usług porównywania cen przyjęła te pojęcia i wskazuje je w specyfikacji układu pozycjonowanego CSS.

Wraz z przeniesieniem definicji do nowej specyfikacji zostały one też udoskonalone.

Jednym z udoskonaleń, które mają bezpośredni wpływ na deweloperów stron internetowych, jest to, że element ::backdrop jest teraz elementem działającym w trybie drzewa, co oznacza, że dziedziczy wszelkie dziedziczone właściwości z elementu źródłowego.

Obsługa przeglądarek

• 122
• 122
• 120
• 17,4

Dzięki tej zmianie można zastępować wartości właściwości niestandardowych w przypadku konkretnych elementów, a ::backdrop uzyska do nich dostęp. Na przykład element ::backdrop powiązany z otwartym elementem <dialog> ma teraz dostęp do właściwości niestandardowych dostępnych w 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);
}

Prezentacja z oknem <dialog>, które otwiera się w górnej warstwie. W Chrome od wersji 122 ::backdrop ma dostęp do zmiennej --backdrop-color i może używać jej do kolorowania tła.