CSS @property Houdini 变量注册与主题动画实践

概览`@property` 能为 CSS 变量注册类型与初始值，让其参与动画与过渡。搭配设计令牌可实现平滑的主题切换与动态配色。变量注册@property --brand-hue { syntax: '<number>'; inherits: true; initial-value: 250; } @property --brand-chroma { syntax: '<number>'; inherits: true; initial-value: 0.12; } :root { --brand-lightness: 60%; } 主题颜色与过渡.btn { --brand: oklch(var(--brand-lightness) var(--brand-chroma) var(--brand-hue)); background: var(--brand); color: white; transition: --brand-hue 300ms ease, --brand-chroma 300ms ease; } .btn:hover { --brand-hue: 270; --brand-chroma: 0.16; } JS 协同document.documentElement.style.setProperty('--brand-hue', '220') document.documentElement.style.setProperty('--brand-chroma', '0.10') 治理要点仅为需要动画的变量注册 `@property`；其他变量保持普通自定义属性。统一令牌管理（hue/chroma/lightness），保证多组件一致视觉。与 `prefers-reduced-motion` 协同，照顾低动效用户。验证与指标浏览器：Chrome 120+、Safari 17+（Firefox 对 @property 支持受限时退化为普通变量）主题切换平滑、无闪烁；变量动画响应稳定