currentBackgroundColor 可以成为有效的 CSS 颜色值关键字吗？

Question

CSS 定义

currentColor

作为与元素的

color

属性等效的颜色。它类似于 CSS 变量，但基于每个元素。当

currentColor

用作任何 CSS 属性中的颜色值时，它会计算应用它的元素的

color

值。

所以，我的问题不是某些东西是否

currentBackgroundColor

存在——我已经梳理了CSS颜色规范并且相当有信心它不存在——而是它是否可能存在。

借用

currentColor

的定义，我认为

currentBackgroundColor

将被定义为：

‘background-color’属性的值。 “currentBackgroundColor”关键字的计算值是“background-color”属性的计算值。如果在“background-color”属性本身上设置了“currentBackgroundColor”关键字，则将其视为“background-color：继承”。

任何人都可以指出我可能没有考虑的任何实施问题吗？

Answer 1

任何人都可以指出我可能没有考虑的任何实施问题吗？

是的。可能存在循环依赖：

* {
  background-color: currentColor;
  color: currentBackgroundColor;
}

此外，

currentcolor

也很有用，因为文本具有单色。但背景可以有其他东西，例如背景图像等，这可能会违反直觉地将

background-color

设置为默认值

transparent

。然后

currentBackgroundColor 

就没多大用了。

Answer 2

是的，可以。例如，它可以非常轻松地创建文本的反色部分，即您可以交换前景色和背景色以突出显示某些内容。

然而，建议将此作为 CSS 功能将是逆潮流而行。曾经有一大堆 CSS 颜色关键字，例如滚动条颜色、标准按钮颜色以及按钮上 3D 阴影的颜色……但不久前它们都从 CSS 中删除了。

CSS 中有很多可能有用但实际上没有的东西。就我个人而言，我对 CSS 变量更感兴趣。当它们成为主流时，我们不太可能太担心像这样的颜色关键词

Answer 3

在很多情况下，currentBackgroundColor 肯定非常有用。 我使用过的替代技术是......

1. CSS 自定义属性（CSS 变量），例如 --backgroundColor。
2. 利用 currentColor 设置背景颜色。这种方法仅适用于不使用前景色的容器（和特定子容器）。子元素可以继承颜色并设置background-color:currentColor。

Answer 4

我很幸运地使用了

Canvas

系统颜色，它被定义为“应用程序内容或文档的背景”。为了安全起见，我还将文本颜色设置为

CanvasColor

，以确保我不会意外地实现白底白字或黑底黑字。

但是，这将不会反映页面的CSS，甚至

body { background-color:purple; }

。它所做的一切都是系统配置的关键。它似乎确实符合默认的“深色模式”着色方案，这解决了我的特殊问题。

实现示例：

p       { padding:1ex; }
.purple { background-color:rebeccapurple; color:#fff; }
.canvas { background-color:Canvas; color:CanvasText; }

<p class="purple">
  This block is white on purple.
  <span class="canvas">This sentence uses "Canvas" coloring.</span> 
  This sentence does not.
</p>
<p>This is normal text.</p>

Answer 5

这已于 2020 年提出，但此后一直没有进展。