为什么不受支持的 CSS 值仍然会覆盖其后备声明？

Question

我设置了一些 CSS 规则，例如：

.example {
  color: white;
  background-color: darkgray;
  background-color: var(--bg-color);
  background-color: rgb(from var(--bg-color) r g b  / 0.5);
}

期望如果浏览器不理解相当新的相对颜色语法（或相当旧但不古老的

var()

语法），我的元素仍然清晰可辨。但在较旧的浏览器中，我仍然会得到透明的 (

getComputedStyle($0).backgroundColor === rgb(0,0,0,0)

) 背景，而不是我需要的易读性较暗的背景。

为什么这两个都是真的？

• 浏览器不理解语法（不使用相对颜色即可证明）
• 浏览器无论如何都会使用该规则（如未使用的后备规则所证明的那样）

CSS 值规范说 re。 “部分实现”：

为了让作者可以利用前向兼容的解析规则来分配后备值，CSS 渲染器必须将任何 at 规则、属性、属性值、关键字和其他它们没有的语法结构视为无效（并酌情忽略）。可用的支持级别。特别是，用户代理不得有选择地忽略不支持的组件值并在单个多值属性声明中尊重支持的值：如果任何值被视为无效（不支持的值必须如此），CSS 要求忽略整个声明。

所以我的理解是，不理解或支持我的相对颜色语法的浏览器应该忽略整个声明。那么为什么它不使用早期的后备之一呢？

Answer 1

您可以尝试以下操作，某些浏览器不接受 var 或 rgb，因此它不会返回任何内容（透明的东西），这应该可以工作，因为您有备用颜色。

.example {
  color: white;
  background-color: darkgray; 
  background-color: var(--bg-color, darkgray); 
  background-color: rgb(from var(--bg-color) r g b / 0.5);
}