Разве этот цвет не должен быть зеленым?

Question

Если цвет пролета не должен быть зеленым, то в Chrome он красный.

Спецификация HTML говорит, что он должен быть зеленым, он зеленый в Firefox.

Спецификация HTML использует fetch для получения ресурсов, на которые ссылаются элементы (см. Это, и 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 должен быть зеленым; вы генерируете текстовую / CSS-ссылку, которая устанавливает divs в красный цвет, и добавляете ее к заголовку документа. Тогда вы используете getComputedStyle скопировать цвет из div на span.

В Safari, Chrome и Edge обе строки заканчиваются красным; в Firefox диапазон - зеленый, а div - красный.

НО! при первой загрузке, или если вы загрузите эту страницу в Safari или Chrome с чистым, пустым кешем ^*, вы увидите то же поведение, что и в Firefox: зеленый промежуток и красный div. Edge никогда не ведет себя как FF, он всегда красный для обоих даже при первой загрузке.

^* (В Safari вы можете просто использовать личное окно просмотра. Могу поклясться, что однажды видел то же самое в Chrome, но больше не могу воспроизвести; возможно, я ошибся.)

Поэтому вот моя гипотеза о том, что происходит:

• В Safari, когда созданная ссылка на таблицу стилей никогда не использовалась ранее, она асинхронная, поэтому getComputedStyle подбирает цвет из встроенного стиля. При последующих загрузках сгенерированная таблица стилей уже находится в кеше, когда getComputedStyle работает, поэтому его правило вступает во владение.
• В Firefox ссылки на таблицы стилей всегда обрабатываются как асинхронные, поэтому getComputedStyle всегда выбирает встроенное правило.
• В других браузерах ссылка на таблицу стилей интерпретируется синхронно (возможно, потому что браузер может сказать, что data URI не требует сетевого времени?), Поэтому обрабатывается раньше getComputedStyle пробеги.

Это достаточно странный крайний случай, и я не уверен, какое поведение можно описать как "согласно спецификации".

Answer 2

Попробуйте HTML или HTML5 (это Chrome):

      <span type="color:green">shouldn't this be green</span>