::backdrop
的发展历程
Fullscreen API 引入了新概念,例如顶层和 ::backdrop
元素。
- 顶层是在视口内离用户最近的位置渲染的新堆叠层。它与视口大小相同,并且会显示在所有其他图层之上。
::backdrop
CSS 伪元素是一个与视口大小相同的方框,直接呈现在顶层呈现的任何元素的正下方。
::backdrop
原始规范的一个特点如下:
它不会从任何元素继承,也不会从它继承。
虽然这有助于隔离 ::backdrop
的样式,但也意味着 ::backdrop
无权访问 :root
上声明的任何自定义属性。这就造成了 Web 开发者的混淆。
如需解决此问题,您必须在 ::backdrop
和 :root
上明确声明自定义属性以使其可用:
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
更新了 ::backdrop
为了解决 ::backdrop
的问题,CSS 工作组采用了这些概念,现在将它们列在 CSS 定位布局规范中。
除了将定义转移到新规范外,对定义进行了优化。
一项优化措施对 Web 开发者产生了直接影响,那就是 ::backdrop
元素现在是一个驻留在树中的元素,这意味着它从其源元素继承了任何可继承的属性。
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
得益于这一变更,您可以替换特定元素的自定义属性值,而 ::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);
}