为什么CSS hsl赋值需要后备颜色？

Question

Resharper告诉我"需要后备颜色"并添加(当我默认时),这里的第一种颜色:

    color: #ff8000;
    color: hsl(30, 100%, 50%);

显然,这首先将#ff8000分配给该类,然后如果hsl值"取"它将覆盖先前的赋值.但为什么这有必要呢？当使用所有类型的颜色分配时,当然不需要"后备颜色"？

Answer 1

一开始,有三种方法可以指定颜色:

CSS3 此后又添加了几种新的颜色格式,包括:

虽然这些新的颜色格式为开发人员定义颜色及其之间的关系带来了极大的灵活性,但由于不兼容性,它也会使旧版浏览器看起来比预期更糟糕.

问题是浏览器中的CSS解析器将跳过其名称或值未被理解的属性.旧的浏览器,如Internet Explorer 8和更早的版本,不理解rgba(),hsl()或者hsla(),,因此将丢弃包含他们的任何声明.

考虑以下:

.box {
    background: #000;
    color: rgba(100, 100, 200, 0.5);
}

支持浏览器将按照描述处理此CSS代码.不支持的浏览器将完全删除颜色属性,因为不理解该值.这意味着使用的实际颜色将从周围的上下文继承,并且实际上可能最终变黑(与背景相同).为防止这种情况,您应始终包含十六进制,命名或rgb()格式的后备颜色,例如:

.box {
    background: #000;
    color: blue;
    color: rgba(100, 100, 200, 0.5);
}

ReSharper要求你做的是提供后备颜色.此回退颜色应始终位于新颜色之前,以确保旧版浏览器正确查看和使用它,并且较新的浏览器继续使用较新的颜色格式.

更多信息: