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);

但是，我无法在 MDN 页面上列出的 getComputedStyle 的

specs

的 any 中找到任何有关颜色格式的承诺。

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:

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

如果 是解析值的组成部分，请参阅 CSS Color 4 §4.6 解析 值。

如果 是计算值的组成部分，请参阅 CSS Color 4 §4.7 序列化 值。

出于

getComputedStyle()

的目的，以上两行含义相同。具体来说，第 4.7.2 节涵盖了大多数常用格式：

4.7.2。序列化 sRGB 值

以下 sRGB 值的序列化形式：

• 十六进制颜色

• rgb()

  和

  rgba()

  值

• hsl()

  和

  hsla()

  值

• hwb()

  价值观
• 命名颜色

源自计算值，因此使用

rgb()

或

rgba()

形式（取决于 alpha 是否恰好为 1），函数名称采用小写字母。

第 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 中的绝大多数用例，因此它们仍然可以依赖。考虑到其他外来格式尚未在任何地方得到真正支持，在它们享受任何主流用途之前可能不值得对其进行测试。

Answer 2

想要跟进一些计算颜色的现实世界示例，太长，无法容纳评论：

const colors = [
  "rebeccapurple",
  "#f092",
  "#ff0099",
  "rgb(255 0 153)",
  "rgb(255, 0, 153)",
  "rgb(255 0 153 / 80%)",
  "hsl(150 30% 60%)",
  "color-mix(in srgb, red, #0000ff 50%)",
  "hsl(from red 240deg s l)",
  "light-dark(white, black)",
];
for (const color of colors) {
  el.style.color = color;
  console.log(color, getComputedStyle(el).color);
}

指定计算丽贝卡紫RGB(102, 51, 153)#f092rgba(255,0,153,0.133)#ff0099rgb(255, 0, 153)rgb(255 0 153)rgb(255, 0, 153)rgb(255, 0, 153)rgb(255, 0, 153)RGB(255 0 153 / 80%)rgba(255,0,153,0.8)hsl(150 30% 60%)RGB(122, 184, 153)颜色混合（srgb，红色，#0000ff 50%）颜色(srgb 0.5 0 0.5)hsl（来自红色240deg s l）颜色(srgb 0 0 1)浅色-深色（白色、黑色）RGB(255, 255, 255)

所以忽略我的