属性：赋予CSS变量超能力

CSS Houdini是一个总称，它涵盖了一组低级API，这些API公开了部分CSS呈现引擎，并允许开发人员访问CSS对象模型。这对CSS生态系统来说是一个巨大的变化，因为它使开发人员能够告诉浏览器如何读取和解析自定义CSS，而无需等待浏览器供应商本地实现这些功能。太令人兴奋了！

在Houdini保护伞中，CSS中最令人兴奋的新增功能之一是Properties和ValuesAPI。该API通过赋予CSS自定义属性(通常也称为CSS变量)语义含义(由语法定义)和平均回退值来增强CSS自定义属性，从而启用CSS测试。

这里是一个设置自定义属性的示例(想想：CSS变量)，但现在使用了语法(Type)、初始值(回退)和继承布尔值(是否从其父属性继承值？)。当前执行此操作的方法是通过JavaScript中的CSS.registerProperty()，但在Chromium 85及更高版本中，您的CSS文件将支持@Property语法：

现在，您可以像访问任何其他CSS自定义属性一样，通过var(--ColorPrimary)访问--ColorPrimary。然而，这里的不同之处在于--color Primary不是作为字符串读取的。它有数据！

抓到你了！使用指定语法编写注册的自定义属性时，还必须包括初始值。

与任何其他自定义属性一样，您可以获取(使用var)或设置(写入/重写)值，但是对于Houdini自定义属性，如果您在覆盖它时设置了Falsey值，则CSS呈现引擎将发送初始值(其回退值)，而不是忽略该行。

请考虑下面的示例。--color Primary变量的初始值为洋红色。但开发商给了它无效的价值"；23&34；。如果没有@Property，CSS解析器将忽略无效代码。现在，解析器退回到megenta。这允许在CSS中进行真正的回退和测试。干净利落！

.card{Background-color：var(--ColorPrimary)；/*洋红色*/}.Highlight-Card{--ColorPrimary：黄色；Background-color：var(--ColorPrimary)；/*黄色*/}.另一张卡片{--ColorPrimary：23；Background-Color：var(--ColorPrimary)；/*洋红色*/}

有了语法特性，您现在可以通过指定类型来编写语义CSS。当前允许的类型包括：

为了说明这一点，我将向您展示如何制作渐变动画。目前，没有办法在渐变值之间平滑地设置动画(或插值)，因为每个渐变声明都被解析为字符串。

在本例中，渐变停止百分比通过悬停交互从起始值40%到终止值100%设置动画。您应该会看到顶部渐变颜色向下的平滑过渡。

右侧的浏览器支持Houdini属性和值API，从而实现平滑的渐变停止过渡。右侧的浏览器不支持。支持Non的浏览器只能将此更改理解为从A点到B点的字符串。没有机会内插值，因此您看不到平稳过渡。

但是，如果您在编写自定义属性时声明语法类型，然后使用这些自定义属性来启用动画，您将看到转换。您可以实例化自定义属性--gradPoint，如下所示：

/*检查Houdini支持&；注册属性*/@Supports(Background：Paint(Something)){@Property--gradPoint{语法：'；<；Percentage>；'；；Inherits：false；Initial-Value：40%；}}。

然后，在设置动画时，可以将值从初始的40%更新为100%：

@属性允许您在CSS本身中编写有语义意义的CSS，从而使一项令人兴奋的技术变得更加容易访问。要了解有关CSS Houdini和Properties and Values API的更多信息，请查看以下搜索资源：