@property 是 css 声明自定义属性类型的规则，通过 syntax: '' 实现颜色值解析约束而非运行时类型检查，需配合 inherits 和 initial-value 才能启用颜色插值与过渡。
什么是 @property？它真能做颜色类型检查吗
@property 是 CSS 中用于声明自定义属性（CSS 变量）的类型、初始值和继承行为的规则，但它本身不执行运行时类型检查——浏览器只在解析时验证你声明的 syntax 是否合法，并在计算值时尝试按该类型解析。所谓“类型检查”，其实是靠 syntax: '<color>'</color> 告诉浏览器：“这个变量只接受颜色值，否则就当无效处理”。
关键点在于：它不是 TypeScript 那种编译期检查，而是 CSS 引擎级的解析约束。
- 未声明
@property的 CSS 变量（如--my-color: red）始终是字符串，动画/过渡中会退化为字符串插值（比如red → #fff会逐字符混合，结果不可控） - 声明了
syntax: '<color>'</color>后，该变量才能参与颜色插值（如transition: --my-color 0.3s），且非法值（如--my-color: 123）会被静默忽略，回退到initial-value - 必须配合
inherits: false或true显式声明继承性，否则语法错误
@property 定义颜色变量的最小合法写法
下面这段是能生效的最简定义：
@property --primary-color {
syntax: '<color>';
inherits: false;
initial-value: #007bff;
}</color>
注意几个硬性要求：
-
syntax必须用单引号包裹，且值为'<color>'</color>（尖括号是字面量，不能省略或写成color） -
inherits必须显式写true或false，不能省略 -
initial-value必须是符合<color></color>语法的值（red、#abc、rgb(0 0 0 / 0.5)等均可，但123或auto会报解析错误） - 该规则需放在样式表顶层（不能嵌套在
@media或选择器内）
为什么 transition 和 @keyframes 需要它
没有 @property 声明时，CSS 变量是无类型的字符串。这意味着：
-
transition: --bg-color 0.2s不会触发颜色渐变，而是直接跳变（因为无法插值） -
@keyframes fade { to { --bg-color: blue; } }动画帧之间不会平滑过渡，浏览器不知道怎么从red算到blue - 一旦加上
syntax: '<color>'</color>，浏览器就知道该用 HSLA 或 sRGB 插值算法，动画才真正生效
示例：让按钮背景色可过渡
@property --btn-bg {
syntax: '<color>';
inherits: false;
initial-value: #007bff;
}
.btn {
background-color: var(--btn-bg);
transition: background-color 0.2s, --btn-bg 0.2s;
}
.btn:hover {
--btn-bg: #0056b3;
}</color>
容易被忽略的兼容性和限制
@property 目前仅 Chromium 内核（Chrome ≥ 100、Edge ≥ 100、Opera ≥ 86）支持，Firefox 和 Safari 完全不支持，且无明确实现计划。
- 服务端渲染或静态 CSS 提取工具（如 PostCSS）通常无法识别或处理
@property，可能直接丢弃整条规则 - 不能用 JS 动态插入
@property规则（document.styleSheets[0].insertRule()会抛错） -
syntax不支持复合类型（如'<color> | <number>'</number></color>），也不支持自定义语法；<color></color>是唯一稳定可用的颜色相关类型 - 如果误写成
syntax: 'color'（缺尖括号），整个@property规则失效，但浏览器不会报错，变量退化为普通字符串变量
实际项目中，若需兼容老浏览器，仍得靠预设类名切换或 JS 控制 class + CSS 过渡组合方案。把 @property 当作渐进增强用更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
