getPropertyValue获取CSS自定义属性偶现空值问题求助

我在<head>标签早期插入了以下样式：

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

等Google Tag Manager（GTM）加载完成后，执行这段JavaScript获取属性值：

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

在高流量站点做实验时，发现约16%的场景下这段代码返回空字符串，涉及多款主流浏览器的最新版本。原本只预期不支持CSS自定义属性的浏览器会返回空，但数据显示这些用户大多使用支持该特性的浏览器。

我怀疑是不是存在竞态条件？毕竟CSS是在<head>里极早声明的，但JS要等GTM加载完才执行。

核心原因：CSS样式计算的异步性与GTM加载的不确定性 #

即使CSS在<head>里提前声明，浏览器的样式计算并不是完全同步阻塞的，以下几种情况会导致你遇到的问题：

• @supports检测与样式应用延迟：浏览器需要先完成所有特性检测，才能决定是否应用@supports块内的样式。如果GTM加载完成时，浏览器还没完成检测或样式计算，getComputedStyle就可能取不到属性值。
• GTM加载时机波动：GTM的加载受网络环境、浏览器资源调度影响，不同用户的加载完成时间差异极大。JS执行时机恰好卡在样式计算未完成的节点上，就会返回空。
• 浏览器渲染队列调度：浏览器会优先处理关键渲染路径任务，若此时有高优先级任务（如资源加载、DOM操作），样式计算可能被延后，导致JS执行时属性还未被赋值。

可行的修复方案 #

1. 改用JS直接做特性检测，消除CSS依赖
   把@supports里的检测逻辑用JS实现，从根源上避免跨层依赖的竞态问题：

   const supportsAllFeatures = CSS.supports('selector(:not(.foo))') &&
     CSS.supports('aspect-ratio', '1 / 1') &&
     CSS.supports('margin-block-start', '1rem') &&
     CSS.supports('gap', '1rem') &&
     CSS.supports('display', 'grid') &&
     CSS.supports('--css', 'variables') &&
     CSS.supports('object-fit', 'cover') &&
     CSS.supports('display', 'flex');
   
   const enhancedExperience = supportsAllFeatures ? 'true' : 'false';
   

2. 等待浏览器样式计算完成后执行JS
   利用requestAnimationFrame确保在浏览器下一次重绘前获取样式，保证样式已完成计算：

   requestAnimationFrame(() => {
     var enhancedExperience = getComputedStyle(document.documentElement).getPropertyValue('--enhanced').trim();
     // 后续处理逻辑
   });
   

3. 给JS逻辑加兜底判断
   如果返回空字符串，直接按默认值false处理，兼容样式计算延迟的情况：

   var enhancedExperience = getComputedStyle(document.documentElement).getPropertyValue('--enhanced').trim() || 'false';
   

额外建议 #

尽量避免通过CSS自定义属性传递“特性检测结果”这类需要精准时机获取的值，JS直接检测的可靠性更高，也能减少跨层依赖带来的不确定性。

内容的提问来源于stack exchange，提问作者theclarkofben