白屏恢复后CSS变量短暂错色是因首帧渲染时变量值未就绪，浏览器用默认值占位，待CSSOM构建完成才回填；内联样式仍错色因变量定义在外部CSS中，需将变量声明前置到内联块且位于使用规则之前，采用background-color: #1e293b; background-color: var(--bg-body);式双声明才能确保首帧正确渲染。
白屏恢复后 CSS 变量短暂错色，不是变量加载失败，而是浏览器在首帧渲染时用默认值“占位”，等 CSSOM 构建完成、变量解析到位后才回填——中间存在一个视觉空档期，尤其当变量用于 background-color、color 等关键绘制属性时，错色（如灰变白、深变浅）就会肉眼可见。
为什么内联 background-color 仍会错色
很多人加了 body { background-color: #1e293b } 还是闪一下，是因为：该样式虽在 <style></style> 中内联，但若它依赖的变量（比如 background-color: var(--bg-body)）定义在外部 CSS 文件里，浏览器在首帧只能看到无变量的 fallback，而变量值要等那个外部文件下载、解析、注入后才生效。此时已渲染过一帧，默认背景或上层透出的白色就露出来了。
- 变量必须定义在
<style></style>内联块中，且位于使用它的规则之前（顺序敏感） - 避免用
var(--bg-body, #1e293b)做 fallback——老浏览器不识别var()，整行丢弃；新浏览器虽支持，但 fallback 值只在变量未定义时生效，不解决“变量已定义但未就绪”的时序问题 - 真正有效的 fallback 是前置声明：
background-color: #1e293b; background-color: var(--bg-body);
为什么 @supports 检测无法阻止错色
@supports (color: var(--x)) 只控制规则是否被解析，不控制变量值何时可用。即使检测通过，var(--x) 的值仍可能来自 JS 动态设置（如 document.documentElement.style.setProperty('--x', ...)），而 JS 执行总在 DOMContentLoaded 之后，远晚于首帧绘制。
- 服务端或构建时注入的变量值（如
:root { --x: #000; }）才能参与首帧渲染 - JS 设置的变量适合主题切换等交互场景，但不能用于首屏关键色——它天生有延迟
- 若必须 JS 控制，需配合
<style media="print"></style>占位 + 移除 media 属性的同步注入，否则一定错色
移动端 Safari 的双重陷阱
iOS Safari 15.4+ 支持变量，但对首帧变量就绪更苛刻：它会把 var() 解析和布局计算绑得更紧，一旦变量值来自跨域 CSS 或未预加载的 @import，就直接回退到初始值（如 color 用 initial，即黑色；background-color 用 transparent）。
立即学习“前端免费学习笔记（深入）”；
- 所有首屏用到的变量，必须写死在 HTML 的
<style></style>里，且不能含@import、url()、calc() - Safari 不支持
@property动画，也别指望它能平滑过渡变量变化——错色后直接跳变，无渐变缓冲 - 验证方式：开启 Safari 开发者工具 → Network → Offline，看错色是否加剧；若是，说明变量加载路径太长
最易被忽略的是：错色不是样式写错了，而是你把“运行时逻辑”当成了“构建时确定项”。CSS 变量的值就绪时间点，比你想象中更晚、更不可控——尤其在首帧这个毫秒级窗口里。
