为何不支持的CSS相对颜色语法仍覆盖回退声明？

先看你写的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()）的旧浏览器，会自动回退到darkgray背景保证元素可读。但实际情况是，旧浏览器里元素背景变成了透明（通过getComputedStyle($0).backgroundColor === rgb(0,0,0,0)可验证），还出现了看似矛盾的两种现象：

• 浏览器确实看不懂相对颜色语法（最终没用到这个值）
• 浏览器却没有忽略这条声明，导致前面的回退规则被覆盖

问题根源 #

你引用的CSS规范里说“无效声明要整个忽略”，但这里的问题出在旧浏览器对rgb()函数的解析逻辑上：

1. 对于不支持相对颜色语法的浏览器来说，rgb(from var(--bg-color) r g b / 0.5)不是完全陌生的语法——它们认识rgb()函数，只是不支持里面的from相对语法。
2. 这些旧浏览器不会直接判定整个声明无效，反而会尝试按传统rgb()的格式去解析参数。但from var(--bg-color) r g b完全不符合传统rgb()的参数要求（传统是数值/百分比），所以解析失败。
3. 解析失败后，部分旧浏览器的处理逻辑是返回透明色rgba(0,0,0,0)，并且认为这条background-color声明是有效的，于是用这个透明值覆盖了前面所有的background-color设置。

这就导致了看似矛盾的结果：浏览器没用到相对颜色值，但也没忽略这条声明，反而用解析失败后的默认透明值覆盖了回退规则。

解决方法 #

要避免这种问题，最好用@supports规则包裹相对颜色的声明，确保只有支持该语法的浏览器才会加载这条规则：

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

这样，不支持相对颜色语法的浏览器会直接忽略整个@supports块，自然就会使用前面的darkgray或var(--bg-color)作为背景色。

内容的提问来源于stack exchange，提问作者natevw