IE不支持CSS变量（Custom Properties），需为var()提供合法后备值并写在同一行，如color: var(--text-color, #333)；PostCSS插件无法处理跨文件、局部作用域或运行时变量；IE11不支持getPropertyValue('--x')和setProperty('--x', 'y')，需用CSS.supports()检测；CSS变量不可用于@media等语法层规则。
Chrome/Firefox能用但IE直接空白？--primary-color需要降级
CSS变量（Custom Properties）在IE中完全不支持，不是兼容性差，是根本不存在。一旦用了--theme-color又没兜底，IE里对应元素可能渲染失败、样式丢失甚至布局塌陷。
降级核心就一条：**把变量声明和后备值写在同一行，用空格分隔，浏览器自动忽略不认识的部分**。
-
color: var(--text-color, #333);—— Chrome/Firefox读取变量，IE跳过var()函数直接取#333 - 不能写成两行：
color: #333;再覆盖color: var(--text-color);，IE会按后一句执行，结果是color: var(--text-color);→ 无效值 → 回退到继承色或初始值 - Fallback值必须是合法CSS值，不能是另一个
var()（IE不解析嵌套）
PostCSS插件能否全自动补全CSS变量？postcss-custom-properties的局限
这个插件确实能把var(--x)替换成静态值，但前提是变量定义（:root { --x: red; }）必须在同一文件、且在使用前声明。跨文件、动态注入、JS运行时修改的变量，它一概看不见。
更关键的是：它默认只处理:root下的变量，如果变量定义在.card { --padding: 1rem; }这种局部作用域里，插件不会提取也不会替换——因为CSS本身就没提供运行时“查找父级变量”的机制。
立即学习“前端免费学习笔记（深入）”；
- 启用
preserve: false才真正移除var()，否则只是复制一份fallback，体积反而变大 - 若项目用Webpack+CSS Modules，类名哈希会导致
:root外的变量无法被插件捕获 - 它不处理
calc(var(--a) + 1px)里的计算逻辑，只会原样保留var()部分
JS读写getComputedStyle和style.setProperty在旧浏览器报错？
IE11支持getComputedStyle但不支持getPropertyValue('--color')；style.setProperty('--color', 'red')在IE里直接抛InvalidCharacterError。这不是语法错，是引擎根本不识别--开头的属性名。
安全做法是先检测支持性，再分支处理：
if (CSS.supports('color', 'var(--c)')) {
element.style.setProperty('--bg', '#eee');
} else {
element.style.backgroundColor = '#eee';
}
-
CSS.supports()在IE11中可用，但参数必须是完整声明（'color: var(--c)'），不能只传'--c' - 读取变量时，IE11下
getComputedStyle(el).getPropertyValue('--x')返回空字符串，需提前判断并 fallback 到预设值 - 不要依赖
document.documentElement.style.setProperty来批量设置主题色，IE会静默失败
媒体查询里用var(--breakpoint)为什么不生效？
CSS变量不能用在@media、@keyframes、选择器（如[data-theme='var(--mode)']）这些地方——它们属于“CSS语法层”，而变量属于“CSS值层”，解析时机不同。
比如@media (min-width: var(--sm)) { ... }在任何浏览器都会被忽略，不是兼容问题，是规范禁止。
- 响应式断点必须硬编码或用预处理器（Sass/Less）生成，不能靠CSS变量动态驱动
- 想实现主题切换响应式？得用JS监听
matchMedia，再手动切换document.documentElement上的类名或属性 - 伪元素内容
content: var(--label);在IE中显示为空，需额外加content: 'default';fallback
!important共存时的降级行为——color: var(--c, red) !important;在支持变量的浏览器中!important生效，但在IE里整个声明因含未知函数被丢弃，!important也跟着失效。这时候后备值是否带!important，得看上下文优先级需求。 
