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

Question

我正在解析 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 of the specs for getComputedStyle listed on its MDN page.

中找到关于颜色格式的任何承诺

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

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

编辑:

用于在控制台中测试颜色值的快速代码片段：

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

Answer 1

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

To serialize a CSS component value depends on the component, as follows:

<color>
If <color> is a component of a resolved value, see CSS Color 4 §4.6 Resolving <color> Values.

If <color> is a component of a computed value, see CSS Color 4 §4.7 Serializing <color> Values.

就getComputedStyle()而言，以上两行意思相同。具体来说，section 4.7.2涵盖了大多数常用格式：

4.7.2. Serializing sRGB values

The serialized form of the following sRGB values:

hex colors

rgb() and rgba() values

hsl() and hsla() values

hwb() values

named colors

is derived from the computed value and thus, uses either the rgb() or rgba() form (depending on whether the alpha is exactly 1, or not), with lowercase letters for the function name.

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

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

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

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

Is color format specified in the spec for getComputedStyle?

javascript

css

getcomputedstyle

cssom

css-color

4.7.2. Serializing sRGB values