I am rendering the following style very early in the <head> :
<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>
Then, later, after Google Tag Manager has loaded on the page, I am then running some JavaScript to get the value of the CSS custom property that was declared:
var enhancedExperience = getComputedStyle(document.querySelector('html')).getPropertyValue('--enhanced');
return enhancedExperience;
I have deployed this code to a website with a very high amount of traffic to run an experiment. And I have found that roughly 16% of the time getComputedStyle(document.querySelector('html')).getPropertyValue('--enhanced') returns an empty string. And it is happening on a diverse range of browsers including the latest versions of all major browsers.
I was expecting the empty string for browsers that do not support CSS custom properties. But I can see from the analytics data that most of the 16% of users are on browser versions that do have support for CSS custom properties.
Why might this be? I thought perhaps race condition but considering the CSS custom property is declared so early on in the <head> and the JavaScript doesn't run until GTM is loaded, is that possible?
Try: