Изменения в наследовании CSS::backdrop

Bramus

История ::backdrop

В полноэкранном API представлены новые концепции, такие как верхний слой и элемент ::backdrop .

• Верхний слой — это новый слой сложения, отображаемый ближе всего к пользователю в области просмотра. Он имеет размер области просмотра и отображается поверх всех остальных слоев.
• Псевдоэлемент CSS ::backdrop представляет собой блок размером с область просмотра, отображаемый непосредственно под любым элементом, представленным в верхнем слое.

Одной из особенностей исходной спецификации ::backdrop было следующее:

Он не наследуется ни от какого элемента и не наследуется от.

Хотя это было полезно для изоляции стиля ::backdrop , это также означало, что ::backdrop не имел доступа ни к одному из пользовательских свойств, объявленных в :root . Это создало некоторую путаницу среди веб-разработчиков .

В качестве обходного пути вам пришлось явно объявить свои пользовательские свойства в ::backdrop а также в :root , чтобы сделать их доступными:

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

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

Обновление ::backdrop

Чтобы исправить проблемы с ::backdrop , рабочая группа CSS приняла эти концепции и теперь определила их в спецификации CSS Positioned Layout .

Наряду с переносом определения в новую спецификацию определения были уточнены.

Одним из усовершенствований, которое оказывает непосредственное влияние на веб-разработчиков, является то, что элемент ::backdrop теперь является элементом , постоянным в дереве , то есть он наследует любые наследуемые свойства от своего исходного элемента.

Благодаря этому изменению можно переопределить значения пользовательских свойств для определенных элементов, и ::backdrop получит к ним доступ. Например, ::backdrop , связанный с открытым элементом <dialog> теперь может получить доступ к пользовательским свойствам, доступным в этом <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);
}