ie11完全不解析var()，必须前置静态值+后置var()覆盖，postcss-custom-properties需设preserve: false且置于autoprefixer前，变量须定义在:root中、值为简单类型、不可动态设置。
IE11 完全不解析 var(--x)，遇到含该函数的整条 CSS 声明（如 color: var(--primary);）会静默丢弃——不是降级失败，是样式直接消失。靠 var(--x, #fff) 或 @supports 都救不了它。
必须前置静态值 + 后置 var() 覆盖
这是唯一能在 IE11 和现代浏览器中同时生效的基础写法。IE 忽略第二行，现代浏览器用第二行覆盖第一行。
-
background: #007bff;必须写在background: var(--primary);前面，顺序不能颠倒 - 复合属性（如
border、background）不能只写一个后备；要拆成原子属性，例如：background-color: #fff;+background-color: var(--bg);+background-image: url(...); -
var(--x, #fff)在 IE 中完全无效——它连括号都不读，只当整行不存在
postcss-custom-properties 必须设 preserve: false
默认配置下，这个插件只是追加一行静态值，比如把 color: var(--c); 编译成：
color: #007bff; color: var(--c);
IE 会跳过第二行，最终取初始值（background 变成 transparent，color 回退为黑色）。只有显式设置 preserve: false，插件才会删掉含 var() 的行，只留 color: #007bff;。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
preserve: true或不配 → 构建后仍有var()→ IE 失效 - Webpack/Vite 中，该插件必须放在
autoprefixer之前，否则可能被覆盖 - 如果同时用了
css-vars-ponyfill，它依赖原始var()存在；此时配preserve: false会让 ponyfill 找不到变量而失效
变量定义必须满足三个硬条件
postcss-custom-properties 是构建时静态分析工具，只能处理它“看得见、算得清”的变量。
- 声明位置：必须在
:root中；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：
--color: red;✅，但--size: calc(1rem + 2px);❌、--c: var(--base);❌ —— 插件无法安全求值，原样保留，IE 照样丢弃 - 来源限制：JS 动态设置（如
el.style.setProperty('--color', 'red')）构建时不可见，无法替换
别信 @supports (color: var(--x)) 检测
@supports 规则本身在 IE11 中不被识别，整条 @supports 块会被忽略——既不会报错，也不会执行里面的内容。
- 正确检测方式是：
@supports (color: var(--_))（变量名任意），但它只对支持变量的浏览器有效，不能单独用于降级逻辑 - 更可靠的做法是 JS 检测：
CSS.supports('color', 'var(--_)')，然后给加no-cssvars类，再用 CSS 类选择器兜底 - 媒体查询里禁用变量：
@media (min-width: var(--sm))在所有浏览器中都会被静默忽略；应改用固定值或通过重设:root变量来响应
真正容易被忽略的是：calc() 里套 var()（如 width: calc(100% - var(--gap))）在 IE11 中不是 “var() 不生效”，而是整个 calc() 表达式被 parser 直接跳过。PostCSS 插件默认也不处理这种嵌套，因为无法安全求值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
