CSS Houdini

CSS Houdini 是一套公开 CSS 引擎部分的 API。这使得开发人员更容易为 CSS 创建扩展。这些扩展可能是为了填充浏览器中尚不可用的功能，试验新的布局方法，或添加创意边框或其他效果。

虽然许多 Houdini 示例展示了 API 的创造性可能性，但它也有许多实际用例。例如，您可以使用 Houdini 创建具有类型检查和默认值的复杂自定义属性。

基本示例

常规的 CSS 自定义属性由属性名称和值组成。因此，我可能会创建一个名为 --background-color 的自定义属性，并期望它被赋予一个颜色值。然后，该值在 CSS 中的使用方式与颜色值相同。

css

:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}

但是，在上面的示例中，没有任何东西可以阻止某人对该属性使用其他一些值，例如将其设置为长度。这样做之后，在任何使用该属性的地方都不会有背景颜色，因为 background-color: 12px 无效。当浏览器遇到无法识别的 CSS 时，它会丢弃该行。

但是，使用 @property，我们可以使用 <color> 的 syntax 来声明自定义属性。这表明我们需要该属性具有一个有效颜色的值。

css

@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}