用途
该技能用于处理 CSS 自定义属性在动画与类型安全方面的局限。CSS 自定义属性默认是无类型的字符串替换,浏览器无法在过渡或动画过程中对其进行插值。通过 @property 注册属性,可以让浏览器获得所需信息,从而在值之间进行动画、校验令牌赋值并限定继承范围,把自定义属性从字符串宏转变为一等类型化值。这可用于实现动画渐变、类型化设计令牌,以及未注册属性无法做到的作用域组件主题。
主要能力
- 识别文件中用于过渡或动画的 CSS 自定义属性,这些属性需要 @property 注册才能正确动画。
- 为用于过渡或动画的自定义属性添加 @property 注册,包含正确的 syntax 描述符、initial-value 和合适的 inherits 值。
- 解释 @property 的工作原理、未注册自定义属性为何无法动画、syntax 描述符各值的含义,以及 inherits 如何控制级联行为。
- 代码审查:检查所有引用自定义属性的 CSS 过渡与动画,标记未用 @property 注册却被用于过渡或动画的自定义属性,并标记缺少 initial-value 的 @property 注册。
使用方式
技能以检查、修复、解释、代码审查四种操作形式提供。检查用于审查文件中的自定义属性并找出需要注册的属性;修复用于补充 @property 注册及其 syntax、initial-value、inherits;解释用于说明机制与语义;代码审查用于系统性排查过渡与动画中的注册缺失问题。完整实现细节、代码示例和框架相关指导见 references/rule.md。规则页面为 https://frontendchecklist.io/en/rules/css/css-at-property。
适用场景
适用于实现动画渐变、涉及自定义属性值的复杂 CSS 过渡,或构建带类型的设计令牌系统等场景。
限制
资料未提供该技能的具体安装命令、支持的框架范围、收费方式或效果保证等信息,暂未提供。