dialog.open 属性无法驱动 css 变量动画，因其布尔切换不触发 reflow 或变量重计算；必须通过 class（如 is-open）切换来动态更新变量并实现过渡效果。
dialog 标签本身不支持 CSS 变量动态响应 open 状态变化，必须靠 class 切换触发变量生效；直接在 :modal 或 ::backdrop 里用 var(--x) 会失效，除非变量定义在父级且被显式继承。
为什么 dialog.open 属性无法驱动 CSS 变量动画
open 是布尔属性，切换时无过渡帧，浏览器不会触发 reflow 或 CSS 变量重计算。即使你写 dialog[open] { --bg: #fff; }，样式引擎也不会监听该属性变更来更新变量值——它只在初始计算时读取一次。
- 所有基于
dialog[open]或dialog:modal的变量赋值都是静态快照，不能用于动画或条件切换 -
:modal伪类匹配成功后，变量仍按声明时的值渲染，不随后续 JS 修改style.setProperty()实时更新（除非手动触发重绘） - 想让变量“动起来”，必须绑定到一个可切换的 class，比如
is-open，再在该 class 下重新定义--bg、--scale等
正确用法：class + CSS 变量控制 dialog 外观与动画
把变量定义收拢到 class 上，打开/关闭时增删 class，CSS 自然响应。这是唯一稳定可控的方式。
- 初始化时给
<dialog></dialog>设置基础变量：dialog { --bg: #fff; --duration: 0.25s; --easing: ease-out; } - 定义动画状态：
dialog.is-open { --bg: #f8f9fa; --scale: 1; opacity: 1; transform: scale(var(--scale)); } - 关闭态反向设置：
dialog:not(.is-open) { --scale: 0.95; opacity: 0; transform: scale(var(--scale)); } - transition 必须写在通用选择器上：
dialog { transition: opacity var(--duration) var(--easing), transform var(--duration) var(--easing); }
::backdrop 中使用 CSS 变量的限制与绕过方案
dialog::backdrop 支持部分变量，但 Safari 16.4 之前不继承父级变量，且不能用 var(--x) 控制 background 的透明度通道（rgba 第四个参数不能是变量）。
- ✅ 安全写法：
dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(var(--blur, 4px)); } - ❌ 危险写法：
dialog::backdrop { background: rgba(0, 0, 0, var(--alpha, 0.5)); }—— 多数浏览器解析失败 - 绕过方案：用两个 class 分别定义 backdrop 样式，如
dialog.is-dark::backdrop和dialog.is-light::backdrop，避免依赖变量插值 - 注意：
::backdrop不支持inherit或currentcolor，变量必须显式定义在dialog元素上并用var()引用
容易忽略的兼容性细节
Chrome/Firefox 对变量支持较好，但 Safari 15.6–16.3 在 dialog::backdrop 中读取变量极不稳定，有时变量值为空字符串，导致 fallback 失效。
- 始终为关键变量提供 fallback：
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, var(--backdrop-alpha, 0.5)); - 不要在
:modal规则里改变量值——它不触发重绘，变量还是初始值 - 移动端 iOS Safari 中，
transform: scale(var(--scale))可能导致 dialog 渲染错位，建议降级为固定值或用translate替代 - 如果用 JS 动态改变量（如
dialog.style.setProperty('--bg', '#eee')），需确保 class 已存在且已触发 layout（例如强制getComputedStyle(dialog).opacity）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
