对 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 元素现在是一个树立的元素，这意味着它从其源元素继承任何可继承属性。

浏览器支持

• 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 变量为其背景着色。