GetPropertyValue иногда возвращает пустую строку для CSS Custom Property ⇐ CSS

[Anonymous]

Я рендерирую следующий стиль очень рано в :

Код: Выделить всё

:root {
--enhanced: false;
}
@supports (selector(:not(.foo))) and
(aspect-ratio: 1 / 1) and
(margin-block-start: 1rem) and
(gap: 1rem) and
(display: grid) and
(--css: variables) and
(object-fit: cover) and
(display: flex) {

:root {
--enhanced: true;
}
}

< /code>
Затем, позже, после того, как Google Tag Manager загрузил на страницу, я затем запускаю немного JavaScript, чтобы получить значение пользовательского свойства CSS, которое было объявлено: < /p>
var enhancedExperience = getComputedStyle(document.querySelector('html')).getPropertyValue('--enhanced');

return enhancedExperience;
< /code>
Я развернул этот код на веб -сайте с очень большим количеством трафика для запуска эксперимента. И я обнаружил, что примерно 16% случаев getComputEdstyle (document.queryselector ('html')). GetPropertyValue ('-Enhanced') 

возвращает пустую строку. И это происходит в разнообразных браузерах, включая последние версии всех основных браузеров. Но из данных аналитики я вижу, что большинство из 16% пользователей находятся в версиях браузера, которые имеют поддержку пользовательских свойств CSS. < /P>
Почему это может быть? Я подумал, что, возможно, состояние гонки, но, учитывая, что свойство CSS Custom объявляется так рано в , а JavaScript не работает до тех пор, пока GTM не будет загружен, это возможно?

Подробнее здесь: https://stackoverflow.com/questions/774 ... m-property