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');
if (enhancedExperience && enhancedExperience.indexOf('true') > -1) {
return 1;
}
else if (enhancedExperience && enhancedExperience.indexOf('false') > -1) {
return 0;
}
else {
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 it returns an empty string. And it is happening on a diverse range of browsers including the latest versions of all major browsers.
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?