使用 CSS 属性和值 API

基线 2024

新功能

自 2024 年 7 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能无法在较旧的设备或浏览器中使用。

**CSS 属性和值 API** — 作为 CSS Houdini API 集的一部分 — 允许注册 CSS 自定义属性，从而实现属性类型检查、默认值以及继承或不继承其值的属性。

注册自定义属性

注册自定义属性允许您告诉浏览器自定义属性应如何行为；允许哪些类型、自定义属性是否继承其值以及自定义属性的默认值是什么。有两种方法可以注册属性，在 JavaScript 中或在 CSS 中。

CSS.registerProperty

以下将使用 CSS.registerProperty 注册名为 --my-prop 的自定义属性。--my-prop 将使用 CSS 颜色语法，其默认值为 #c0ffee，并且不会继承其值

window.CSS.registerProperty({
  name: "--my-prop",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

@property

相同的注册可以在 CSS 中进行。以下将使用 @property at-规则注册名为 --my-prop 的自定义属性。--my-prop 将使用 CSS 颜色语法，其默认值为 #c0ffee，并且不会继承其值

css

@property --my-prop {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

使用已注册的自定义属性

注册属性的优势之一是浏览器现在知道如何通过过渡等方式处理您的自定义属性！当属性未注册时，浏览器不知道如何处理它，因此它假设可以使用任何值，因此无法对其进行动画处理。但是，当属性具有注册的语法时，浏览器可以围绕该语法进行优化，包括能够对其进行动画处理！

在此示例中，自定义属性 --registered 已使用语法 <color> 注册，然后在线性渐变中使用。然后在悬停或聚焦时将该属性过渡到不同的颜色。请注意，过渡适用于已注册的属性，但不适用于未注册的属性！

HTML

html

<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>

CSS

css

.registered {
  --registered: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--registered));
  transition: --registered 1s ease-in-out;
}

.registered:hover,
.registered:focus {
  --registered: #b4d455;
}

.unregistered {
  --unregistered: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--unregistered));
  transition: --unregistered 1s ease-in-out;
}

.unregistered:hover,
.unregistered:focus {
  --unregistered: #b4d455;
}

button {
  height: 40vh;
  display: block;
  width: 100%;
  font-size: 3vw;
}

JavaScript

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