CSS4并非正式标准，所谓“CSS4变量新特性”实为CSS自定义属性在Level 2/5等草案中的演进，包括var()嵌套回退、first-valid()函数、attr()扩展支持及@layer/:scope作用域交互增强。
CSS4 并不是一个已发布的标准版本，目前也没有官方命名的“CSS4”规范。所谓“CSS4变量新特性”，实际是 CSS 自定义属性（--*）在近年持续演进中新增的能力，主要来自 CSS Values and Units Level 5、CSS Custom Properties Level 2 等模块草案，部分已在 Chrome 120+、Safari 16.4+、Firefox 128+ 中落地。
下面几个点是开发者真正能用、且容易出错的关键变化：
var() 支持嵌套回退值，但不能递归求值
你可以在 var() 的 fallback 参数里再写一个 var()，浏览器会尝试逐层降级，但不会无限展开：
color: var(--text-color, var(--fallback-color, #333));
这在主题系统中很实用，比如先查组件级变量，再查主题级，最后兜底。但注意：不能写成 var(var(--x)) 或 var(--x, var(--y, var(--z))) 超过两层嵌套时，某些旧版 Safari 会静默失败；而且 fallback 里的 var() 不参与 CSS 层叠计算——它只在主变量未定义时才被解析。
first-valid() 函数替代多层 var() 嵌套
first-valid() 是 CSS Values and Units Level 5 提出的新函数，用于一次性尝试多个变量并取第一个有效值：
background: first-valid(--bg-primary, --bg-fallback, #fff);
相比 var(--a, var(--b, #fff))，它更简洁、语义更清晰，且支持非颜色类型（如长度、数字）。但兼容性差：仅 Chrome 127+（2024年中后）开始实验性支持，当前（2026年9月）仍需加 @supports (background: first-valid(--x)) 守卫；未支持时整条声明会被忽略，不可降级为 var() 混用。
立即学习“前端免费学习笔记（深入）”；
attr() 可绑定到任意 CSS 属性，配合变量实现动态样式注入
CSS Values and Units Level 5 扩展了 attr()，不再限于 content 属性，现在可直接用于 color、font-size 等：
.item { color: attr(data-color color, #000); font-size: attr(data-size px, 16px); }
这意味着你可以把变量“存在 HTML 属性里”，绕过 CSS 文件重载。但它和 var() 有本质区别：attr() 不继承、不级联、不响应 JavaScript 修改 DOM 属性后的实时重算（除非触发重排）；而且类型必须显式声明（color、px、number），否则 fallback 会生效。适合静态配置，不适合高频切换的主题系统。
变量作用域与 :scope / @layer 交互更复杂
在使用 @layer（Tailwind v4 默认启用）或 :scope（Shadow DOM）时，var() 的查找链会受层叠顺序和作用域边界影响：
-
:root定义的变量仍全局可用，但若某@layer base里也定义了同名--color，它会在该 layer 内覆盖:root的值 -
:scope内的var(--x)只向上查找 Shadow Root，不会穿透到宿主文档的:root - 动态修改
document.documentElement.style.setProperty()会影响所有层，但修改shadowRoot.host.style.setProperty()只影响该 Shadow Root 内部
最容易被忽略的是：**@layer 不改变变量定义的作用域，只改变样式的层叠优先级；变量本身仍按 CSS 继承规则查找，和 @layer 声明顺序无关**。很多迁移 Tailwind v4 的项目因此出现变量突然失效，其实是 layer 内规则被更高层覆盖，导致带 var() 的声明根本没执行。
