getPropertyValue иногда возвращает пустую строку для пользовательского свойства CSS

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

      <style>
: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;
    }
}
</style>

Затем, позже, после загрузки Диспетчера тегов Google на странице, я запускаю JavaScript, чтобы получить значение объявленного пользовательского свойства CSS:

      var enhancedExperience = getComputedStyle(document.querySelector('html')).getPropertyValue('--enhanced');

return enhancedExperience;

Я развернул этот код на веб-сайте с очень большим объемом трафика для проведения эксперимента. И я обнаружил, что примерно в 16% случаевgetComputedStyle(document.querySelector('html')).getPropertyValue('--enhanced')возвращает пустую строку. И это происходит в самых разных браузерах, включая последние версии всех основных браузеров.

Я ожидал пустую строку для браузеров, которые не поддерживают пользовательские свойства CSS. Но из аналитических данных я вижу, что большинство из 16% пользователей используют версии браузера, в которых есть поддержка пользовательских свойств CSS.

Почему это может быть? Я подумал, что, возможно, это состояние гонки, но, учитывая, что пользовательское свойство CSS объявлено на столь раннем этапе<head>и JavaScript не запускается до тех пор, пока не будет загружен GTM, возможно ли это?

Источник

0 ответов

Другие вопросы по тегам