Firefox截至2026年7月仍不支持@property，Chrome 110+、Edge 110+、Safari 16.4+已支持；需用@supports(@property: --x)检测，且@property必须置于:root或顶层@layer中。
@property在Firefox中完全不生效，这是事实
截至2026年7月，Firefox（包括最新版128）仍不支持 @property，且官方无明确实现计划。Chrome 110+、Edge 110+、Safari 16.4+ 已稳定支持。这意味着只要用到 @property，就必须面对 Firefox 的“静默失效”——不是报错，而是整条规则被忽略，var(--x) 退化为字符串，transition 和 @keyframes 全部停摆。
@supports(@property: --x) 是唯一可靠检测方式
不能用 @supports (transition: --x) 或 @supports (--x: 0) 判断，这些在 Firefox 中都返回 true，因为普通自定义属性语法本身是支持的。只有 @supports (@property: --x) 能准确识别引擎是否真正注册了类型系统。
@supports (@property: --size) { /* ✅ 这里写 Chromium/Safari 专属逻辑 */ }- 必须把整个动画逻辑包裹进去，包括
@keyframes、transition声明、以及对应的@property规则本身 - 不要在
@supports外写 fallback 动画——浏览器会先解析外层样式，再执行条件块，容易引发冲突
Firefox降级不能只靠“不加动画”，得有视觉兜底
常见错误是把 Firefox 用户直接扔给静态样式，结果交互感断裂。真正可用的降级要分两层：
- 基础渲染兜底：对所有
var(--x, 10px)显式提供 fallback 值，确保background-image: radial-gradient(#000 var(--d, 10px))在 Firefox 中至少能生成合法渐变 - 行为替代方案：用
font-size模拟长度动画（它是天然可 transition 的 CSS 属性），或用transform: scale()替代--scale变量驱动 - JS 回退慎用：仅当动画不可省略时才启用
requestAnimationFrame+element.style.backgroundImage，避免全量 JS 动画拖慢低端设备
syntax和initial-value不匹配会导致“假支持”
即使 Chrome 显示动画正常，也可能埋着坑：比如 syntax: "<number>"</number> 却配 initial-value: "50"（带引号字符串），这条 @property 在 Chrome 中会被整条丢弃，但控制台不报错，transition 看似运行实则跳变。这类问题只在真实用户操作中暴露，开发时很难复现。
立即学习“前端免费学习笔记（深入）”；
- 数字型必须传裸数字：
el.style.setProperty('--progress', 0.7)，不是'0.7' - 长度型必须带单位：
'16px'合法，16或'16'都失效 - 别滥用
syntax: "*"：它放弃类型校验，transition可能中途中断（例如从'10px'→'2em'插值失败）
最易被忽略的是：所有 @property 必须写在 :root 或顶层 @layer 块里，塞进组件类选择器内就等于没写——这个限制在兼容性处理前就得先过掉。
