@property 必须显式声明 syntax 才生效，缺 syntax 整条规则被忽略；syntax 值须与 initial-value 类型严格匹配，否则声明静默丢弃；仅 chromium 120+ 和 safari 16.4+ 支持，检测需用 css.supports('--prop: value')。
@property syntax 必须显式声明才生效
只写 :root { --color: red; } 不会触发任何类型校验，浏览器始终把它当字符串处理。动画、过渡、calc() 中的插值都会退化为字符级混合（比如 red → #000 可能变成 r000 这类不可控结果）。真正启用语法约束，必须用 @property 规则，且 syntax 是强制字段——缺了它，整个规则无效。
常见错误包括：
-
@property --size { inherits: false; initial-value: 16px; }❌ 缺syntax，浏览器直接忽略该声明 -
@property --size { syntax: 'length'; }❌ 少尖括号，正确是'<length>'</length> -
@property --size { syntax: "<length>"; }</length>❌ 用了双引号，必须单引号
syntax 值必须与 initial-value 类型严格匹配
initial-value 不是“默认值”那么简单，它是浏览器校验 syntax 合法性的唯一依据。一旦不匹配，整条 @property 声明被静默丢弃（DevTools 的 CSS 面板里根本看不到它注册成功）。
匹配要点：
-
syntax: '<color>'</color>→initial-value: 'hsl(200, 100%, 50%)'✅，initial-value: '16px'❌ -
syntax: '<length>'</length>→initial-value: '0.5rem'✅，initial-value: 0.5❌（必须是带单位的字符串） -
syntax: '<number>'</number>→initial-value: '3.14'✅，initial-value: '3.14px'❌
JS 动态赋值时非法值会被静默忽略
有了 @property 和合法 syntax，element.style.setProperty('--color', '123') 这类操作不会报错，但值不会生效——变量保持上一次合法值。这和没加 @property 时“存进去就显示乱码”完全不同。
调试建议：
- 在 DevTools 中悬停
var(--color)，提示invalid value表示 JS 赋值失败，不是变量未定义 - 检查
getComputedStyle(el).getPropertyValue('--color')返回值，空字符串 ≠ 未定义，可能是非法赋值后回退到initial-value - 不要依赖
el.style.getPropertyValue('--color')，它只读内联样式，漏掉 CSSOM 注入或继承来的值
浏览器支持现状与检测方式
目前仅 Chromium 内核（Chrome/Edge 120+、Opera）和 Safari 16.4+ 支持 @property；Firefox 仍未实现。检测必须用 CSS.supports('--prop: value')，不能省略值，也不能加括号。
关键限制：
-
CSS.supports('--color: red')✅ -
CSS.supports('--color')❌（返回false） -
CSS.supports('(--color: red)')❌（Safari 17.3 及更早解析失败） -
@property必须放在样式表顶层，不能嵌套在@media或选择器内
最容易被忽略的是：即使 CSS.supports() 返回 true，也不代表该变量能在所有上下文中参与动画——比如某些旧版 Safari 在伪元素中仍会忽略 --color 的颜色插值，必须实测渲染行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
