对 CSS ::backdrop 继承的更改

Bramus

::backdrop 的历史记录

Fullscreen API 引入了顶层和 ::backdrop 元素等新概念。

• 顶层是视口中距离用户最近的渲染堆叠层。它与视口大小相同，并显示在所有其他图层之上。
• ::backdrop CSS 伪元素是一个与视口大小相同的框，会在顶层中呈现的任何元素下方立即呈现。

::backdrop 原始规范的一项功能如下：

它不会从任何元素继承，也不会被任何元素继承。

虽然这有助于隔离 ::backdrop 的样式，但也意味着 ::backdrop 无法访问在 :root 上声明的任何自定义属性。这让网络开发者感到困惑。

作为一种权宜解决方法，您必须在 ::backdrop 和 :root 上明确声明自定义属性，才能使其可用：

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

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

::backdrop 更新

为了解决 ::backdrop 的问题，CSS 工作组采用了这些概念，并在 CSS 定位布局规范中对其进行了说明。

除了将定义移至新规范之外，我们还对这些定义进行了优化。

对 Web 开发者有直接影响的一项改进是，::backdrop 元素现在是一个遵循树结构的元素，这意味着它会继承其来源元素的所有可继承属性。

浏览器支持

• 122
• 122
• 120
• 17.4

得益于这项变更，您可以替换特定元素的自定义属性值，并且 ::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 变量来为其背景着色。