getComputedStyle 的规范中是否指定了颜色格式？答案

【问题标题】：Is color format specified in the spec for getComputedStyle?getComputedStyle 的规范中是否指定了颜色格式？
【发布时间】：2021-07-04 09:39:56
【问题描述】：

我正在解析getComputedStyle 返回的颜色字符串，以从中获取R、G、B 和A 值。

到目前为止（在 Chrome 和 Firefox 中），颜色值似乎总是以易于解析的 rgb 或 rgba 格式返回：

const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);

但是，我无法在 any 的 specs 中找到任何关于颜色格式的承诺，因为 getComputedStyle 列在其 MDN page 上。

getComputedStyle的颜色格式有保证吗？还是完全取决于浏览器的实现？

我宁愿不必检查 HEX 和 HSLA 值（以及其他任何可能的值 - 我不完全确定）。

编辑：

用于在控制台中测试颜色值的快速 sn-p 代码：

console.log((str => {
    const div = document.createElement("div");
    div.style.backgroundColor = str;
    document.body.append(div);
    return getComputedStyle(div).backgroundColor;
})("magenta"));

【问题讨论】：

我相信自从 IE6（十六进制）以来，一切都只返回了 RGB/A，但我找不到任何官方文档来支持它。
@DBS 是的，这就是我现在所处的位置。很有信心我可以摆脱它，但要寻找最后 10% 来帮助我晚上睡个好觉:)
透明会发生什么？（我认为，从技术上讲，这与任何 rgba 组合都不相同）。
@AHaworth 在 FF：rgba(0, 0, 0, 0)
@AHaworth 我已经包含了一个用于测试颜色的代码 sn-p

标签： javascript css getcomputedstyle cssom css-color

【解决方案1】：

CSSOM 没有直接说明这一点，而是referencescss-color-4:

序列化一个 CSS 组件值取决于组件，如下：

如果是已解析值的组成部分，请参阅 CSS Color 4 §4.6 Resolving <color> Values。

如果是计算值的组成部分，请参阅 CSS Color 4 §4.7 Serializing <color> Values。

出于getComputedStyle() 的目的，以上两行的含义相同。具体来说，section 4.7.2 涵盖了大多数常用格式：

4.7.2。序列化 sRGB 值

以下sRGB值的序列化形式：

十六进制颜色

rgb() 和 rgba() 值

hsl() 和 hsla() 值

hwb() 价值观

命名颜色

从计算值派生，因此使用 rgb() 或 rgba() 形式（取决于 alpha 是否正好为 1），函数名称使用小写字母。

Section 4.7.6 涵盖系统颜色（计算为小写）、transparent（计算为rgba(0, 0, 0, 0)）和currentColor（计算为小写currentcolor）。

由于 css-color-4 引入了几种指定颜色的新方法，因此存在其他格式的其他部分，例如用于 LCH 值的 §4.7.3，用于 color() 函数的 §4.7.4 等等。

这意味着来自getComputedStyle() 的颜色值保证为rgb() 或rgba() 格式，具体取决于alpha 值，仅当指定的值在任何§4.7.2 中的格式。但是 §4.7.2 和 §4.7.6 涵盖了日常 CSS 中的绝大多数用例，因此仍然可以依赖它们。考虑到其他地方还没有真正支持其他特殊格式，在它们享受任何主流用途之前，可能不值得对其进行测试。

【讨论】：