css变量在ie等旧浏览器中完全不被识别，必须通过postcss构建时静态降级（preserve: false）+ js运行时no-cssvars类兜底双策略解决；变量须为:root下静态常量，动态js设置的变量无法降级。
HTML 中的 CSS 变量（Custom Properties）在 IE、旧版 Safari 和 Android Browser 等环境中根本不被识别，直接使用会导致样式丢失或渲染异常。这不是“加个 polyfill 就能运行”的问题，而是需要构建时静态处理 + 运行时兜底的组合策略。
用 PostCSS 在构建阶段降级变量
核心是把 var(--color) 替换成实际值，让旧浏览器读到的是纯 CSS。关键依赖 postcss-custom-properties 插件：
- 变量必须定义为静态常量：比如
--primary: #007bff;可降级；--offset: calc(1rem + 2px)或--bg: var(--color)则无法解析，会被跳过 - 作用域要明确：推荐统一在
:root下定义全局变量，组件级变量（如.btn { --bg: blue; }）只影响该选择器内引用，不会跨作用域传播 - 配置中设
preserve: false，避免降级后还残留var()；同时确保插件在 Autoprefixer 之前执行
手动 fallback 类名兜底关键样式
仅靠 PostCSS 降级还不够——如果构建失败、变量未定义、或 JS 动态设置了变量（如 el.style.setProperty('--color', 'red')），旧浏览器仍会失效。必须加一层运行时保障：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 用 JS 检测支持：
if (CSS.supports('color', 'var(--x)')) { document.documentElement.classList.remove('no-cssvars'); } - 在 HTML 根元素上默认加
no-cssvars类，再写两套规则：.btn { background: var(--primary); }<br>.no-cssvars .btn { background: #007bff; } - 不要依赖
@supports做主降级——IE 完全不支持该语法，它只对现代浏览器有效
避免常见降级失效陷阱
构建后检查输出 CSS，如果还能搜到 var(--，说明降级没生效，常见原因有：
- 变量定义位置不对：比如在媒体查询里声明
@media (min-width:768px) { :root { --size: 16px; } }，然后在外部用var(--size)—— PostCSS 通常无法跨条件块回溯解析 - 源码含 BOM 或空格：导致构建工具读取错误，变量声明被截断或忽略
- PostCSS 配置未启用或插件加载顺序错乱，特别是和
postcss-preset-env混用时需确认子插件是否开启
动态变量场景另做处理
JS 设置的变量（主题切换、尺寸响应等）无法被 PostCSS 捕获，旧浏览器需完全绕开 CSS 变量：
- 改用 class 切换控制样式：
document.body.className = 'theme-dark';，再写.theme-dark .header { background: #333; } - 关键交互逻辑（如深色模式开关）在初始化时检测浏览器能力，对不支持变量的环境直接跳过 CSS 变量路径，走 class/fallback 分支
- 避免在 IE11 及以下环境中依赖
getComputedStyle(el).getPropertyValue('--color')，它返回空字符串
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
