color-mix()中使用var()致降级样式失效，按钮hover变透明求助

问题场景 #

我想通过color-mix()基于自定义属性--buttonColor实现按钮hover时背景色变浅的效果，原本预期不支持color-mix()的浏览器会忽略hover状态里的新样式，沿用非hover的背景色，但实际hover时按钮直接变成了透明。哪怕在hover状态里先写了显式的降级样式background-color: var(--buttonColor)，也完全不起作用，代码如下：

.button {
  background: var(--buttonColor);
  &:hover, &:focus {
    background-color: var(--buttonColor);
    background-color: color-mix(in srgb, var(--buttonColor) 80%, white);
  }
}

补充：border-color也存在类似问题，无效时会默认变成白色而非透明。

根本原因 #

核心问题在于浏览器对CSS声明的解析规则：

• 不支持color-mix()的浏览器，不会直接丢弃包含color-mix()的整个声明。因为声明里用到了自定义属性var(--buttonColor)，浏览器会先尝试解析这个var()，但解析完成后发现剩余的color-mix()语法不被支持，这时会把整个属性值判定为无效。
• 按照CSS的属性覆盖逻辑，后面的声明优先级更高——哪怕后面的声明值无效，它依然会覆盖前面的有效声明，最终导致背景色变成浏览器的默认无效值（背景色是透明，border-color是白色）。

解决方案 #

用@supports特性检测包裹color-mix()相关的hover样式，确保只有真正支持color-mix()的浏览器才会加载这段代码，不支持的浏览器会完全忽略这个代码块，保留降级的hover样式：

.button {
  background: var(--buttonColor);
  &:hover, &:focus {
    background-color: var(--buttonColor);
    @supports (background-color: color-mix(in srgb, black 50%, white)) {
      background-color: color-mix(in srgb, var(--buttonColor) 80%, white);
    }
  }
}

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