@财产

@property At-Rule是Chrome（可能是Safari和Firefox）的新增加，允许声明具有增强控制和功能的CSS自定义属性。目前，CSS缺乏直接在梯度内过渡某些属性的能力， @property的旨在解决。

草案规范和“发货意图”文档概述了其功能。 @property规则在选择器块外声明（类似于@media查询），在使用之前注册自定义属性的特征。此注册指定属性的syntax （例如，<color></color> ）， initial-value和inherits标志。

JavaScript等效的CSS.registerProperty()在Houdini倡议下实现了相同的注册。关键优势是使以前无法直接动画的属性过渡。例如，顺利过渡线性梯度的起始颜色，以前需要伪元素（例如伪元素）的解决方法变得很简单：

 @property  -  Gradient-start {
  语法：”<color> ”
  初始价值：白色；
  继承：false;
}

.el {
   - 级别启动：白色；
  背景：线性级别（var（ - 梯度启动），黑色）;
  过渡： - 级别启动1；
}

.EL：悬停{
   - 级别启动：红色；
}</color>

这是因为@property定义--gradient-start为<color></color>，允许CSS正确处理其动画。这与attr()函数的当前限制形成对比，该函数返回字符串值，而不是直接可用的CSS类型<length></length>。尽管确切的发布日期仍然未知，但Chrome的计划实施和其他浏览器的积极信号表明可能会广泛采用。

以上是@财产的详细内容。更多信息请关注PHP中文网其他相关文章！