javascript - 这个跨度颜色不应该是绿色吗？

Question

span 颜色不应该是绿色，在 Chrome 中它是红色的。

HTML 规范说它应该是绿色的，它在 Firefox 中是绿色的。

HTML 规范使用 fetch 来获取元素引用的资源(参见 this 并且 fetch 始终是异步操作。因此在加载新样式表之前获取计算样式，因此颜色应为绿色。

var div = document.createElement("div");
document.body.appendChild(div);

var link = document.createElement("link");
link.href = "data:text/css,div { color: red }";
link.rel = "stylesheet";

var div = document.createElement("div");
document.body.appendChild(div);

var link = document.createElement("link");
link.href = "data:text/css,div { color: red }";
link.rel = "stylesheet";

document.head.appendChild(link);
document.querySelector("span").style.color = getComputedStyle(div).color;

link.remove();
div.remove();

div { color: green }

<span>This should be green</span>

Answer 1

为了使分析更容易，我减少了您的样本以删除重复和不相关的行；以下足以重现问题:

var div = document.createElement("div");
document.body.appendChild(div);

var link = document.createElement("link");
link.href = "data:text/css,div { color: red }";
link.rel = "stylesheet";
document.head.appendChild(link);

document.querySelector("span").style.color = getComputedStyle(div).color;

div {color:green}

<span>This is a span</span>
<div>this is a div</div>

所以这里发生的事情是，有内联 CSS 说 div 应该是绿色的；您生成一个将 div 设置为红色的文本/css 链接，并将其附加到文档头部。然后使用 getComputedStyle 将颜色从 div 复制到 span。

在 Safari、Chrome 和 Edge 中，两条线都以红色结尾；在 Firefox 中，span 是绿色的，div 是红色的。

但是!在第一次加载时，或者如果您在 Safari 或 Chrome 中使用干净的空缓存加载此页面^*，您将看到与 Firefox 中相同的行为:绿色跨度和红色跨度分区Edge 的行为永远不会像 FF，即使在第一次加载时它也总是红色。

^*(在 Safari 中，您可以只使用隐私浏览窗口。我可以发誓我曾在 Chrome 中看到过相同的情况，但我无法再重现；可能我弄错了。)

因此，这是我对正在发生的事情的假设:

• 在 Safari 中，当生成的样式表链接以前从未使用过时，它是异步的，因此 getComputedStyle 从内联样式中获取颜色。在稍后的加载中，生成的样式表在 getComputedStyle 运行时已经在缓存中，因此它的规则接管了。
• 在 Firefox 中，样式表链接始终被视为异步，因此 getComputedStyle 始终采用内联规则。
• 在其他浏览器中，样式表链接是同步解释的(可能是因为浏览器可以判断 data URI 不需要网络时间？)所以在 getComputedStyle 之前处理> 运行。

这是一个非常奇怪的边缘案例，我不确定哪种行为可以被描述为“根据规范”。