此页面由 Cloud Translation API 翻译。

对 CSS ::backdrop 继承的更改

Bramus

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

带有 <dialog> 的演示在顶层打开的应用。在 Chrome 122 及更高版本中，::backdrop 可以访问和使用 --backdrop-color 变量为其背景着色。

对 CSS ::backdrop 继承的更改

::backdrop的发展历程

更新了 ::backdrop

`::backdrop`的发展历程

更新了 `::backdrop`