CSS变量实现图片懒加载占位符样式

为什么直接写 background-color: #f0f0f0 会失效

这不只是颜色没生效的问题，而是它根本没法响应变化。硬编码色值在深色模式切换、主题动态切换、组件复用时全得手动改——background-color 本身不支持条件逻辑，浏览器不会根据 prefers-color-scheme 自动重算。你看到的“占位符没变色”，其实是变量没被声明或被 !important 阻断了。

如何正确定义和使用 --placeholder-bg 变量

变量必须声明在可继承的作用域里，并且要给后续样式留出被覆盖的路径，具体做法如下：

• 在 :root 中设默认值：:root { --placeholder-bg: #f0f0f0; }
• 通过 @media (prefers-color-scheme: dark) 重设：@media (prefers-color-scheme: dark) { :root { --placeholder-bg: #333; } }
• 容器样式统一用 background-color: var(--placeholder-bg)，千万别加 !important
• 如果用在 Web Component 中，改用 :host { --placeholder-bg: #f5f5f5; } 更安全

transition 不触发的三个真实原因

背景色“啪”一下消失，不是 transition 写错了，而是浏览器跳过了重绘时机。下面几个常见坑最容易踩：

• JS 直接 el.classList.add('loaded') 后立即应用 background-color: transparent，中间没留出 layout 触发点
• 正确的做法是包一层 requestAnimationFrame(() => el.classList.add('loaded'))
• 如果用了 background-image 做占位（比如 SVG 或渐变），transition 对它完全无效——只能切 opacity 或 visibility
• 检查是否误用了 !important，它会让 var(--placeholder-bg) 解析失败，退回到初始色

移动端和旧 Safari 的兼容性陷阱

aspect-ratio 和 prefers-color-scheme 在 2026 年已基本全覆盖，但仍有细节容易漏：

• Safari ≤15.4 完全忽略 @media (prefers-color-scheme: dark) 内对 :root 变量的重设，需额外加 color-scheme: light dark 到 根元素
• Android WebView 对 will-change: background-color 支持不稳定，建议只在 iOS 上启用
• 如果图片比例不固定，不能只靠 CSS，得用 JS 注入 style="--aspect-ratio: X/Y"，否则 var(--placeholder-bg) 再准也没用空间

实际项目里最常被忽略的，不是变量怎么写，而是「容器有没有稳定尺寸」——var(--placeholder-bg) 再智能，也填不满一个高度塌陷的 div。