CSS 属性和值 API

CSS 属性和值 API 模块定义了一种注册新 CSS 属性的方法，定义属性的数据类型、继承行为，以及可选的初始值。此 API 扩展了 CSS 级联变量的自定义属性模块，该模块允许作者使用双破折号语法 (--) 在 CSS 中定义自定义属性。CSS 属性和值 API 是 CSS Houdini API 集的一部分。

自定义属性允许您在整个项目中重用值，从而简化复杂或重复的样式表。基本自定义属性在 CSS 级联变量的自定义属性模块中定义。CSS 属性和值 API 扩展了该模块，可以使用 CSS 和 @property @规则或使用 JavaScript 的 CSS.registerProperty 方法为自定义属性添加元数据。

无论是在 CSS 中还是在 JavaScript 中注册，为自定义属性设置元数据都提供了浏览器根据上下文可以使用所需的预期数据类型，定义初始值，并允许您控制继承。

CSS 属性和值 API 自定义属性注册比更基本的 CSS 级联变量自定义属性声明更强大，尤其是在过渡和动画值方面，因为浏览器可以在此类型的自定义值之间进行插值，而使用双破折号语法 (--) 的属性的行为更像是字符串替换。

属性和值 API 应用示例

要了解如何通过 API 使用自定义属性和值，请将鼠标悬停在下面的框上。

CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "cornflowerblue",
});

.box {
  padding: 1rem;
  width: 90%;
  height: 4rem;
  font-family: sans-serif;
  font-size: large;
  color: white;
  border-radius: 0.5rem;
}

.box {
  background: linear-gradient(to right, var(--stop-color), lavenderblush);
  transition: --stop-color 2s;
}

.box:hover {
  --stop-color: aquamarine;
}

<div class="box"><p>Linear gradient with transition</p></div>

该框具有一个背景，该背景由从 --stop-color（自定义属性）到 lavenderblush 的线性渐变组成。--stop-color 的值最初设置为 cornflowerblue，但当您将鼠标悬停在框上时，--stop-color 将在两秒钟内过渡到 aquamarine (linear-gradient(to right, aquamarine, lavenderblush))。