CSS: registerProperty() 静态方法

基线 2024

新功能

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

**CSS.registerProperty()** 静态方法注册 自定义属性，允许进行属性类型检查、默认值以及继承或不继承其值的属性。

注册自定义属性使您可以告诉浏览器自定义属性应如何表现；允许哪些类型、自定义属性是否继承其值以及自定义属性的默认值。

语法

js
CSS.registerProperty(PropertyDefinition)

参数

一个 PropertyDefinition 字典对象，可以包含以下成员

name

表示要定义的属性名称的字符串。

syntax 可选

表示定义的属性的预期语法的字符串。默认为 "*"。

inherits

一个布尔值，定义是否应该继承（true）定义的属性，还是不继承（false）。默认为 false。

initialValue 可选

表示定义的属性的初始值的字符串。

返回值

undefined.

异常

InvalidModificationError DOMException

给定的 name 已经注册。

SyntaxError DOMException

给定的 name 不是有效的自定义属性名称（以两个连字符开头，例如 --foo）。

TypeError

未提供必需的 name 和/或 inherits 字典成员。

示例

以下将使用 registerProperty() 注册一个 自定义属性，--my-color，作为颜色，为其提供一个默认值，并使其不继承其值

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

在此示例中，自定义属性 --my-color 已使用语法 <color> 注册。我们现在可以使用该属性来为悬停或焦点上的渐变进行过渡。请注意，使用注册的属性，过渡有效，但未注册的属性无效！

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

.registered:hover,
.registered:focus {
  --my-color: #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 {
  font-size: 3vw;
}

我们可以将这些样式添加到一些按钮

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

规范

规范
CSS 属性和值 API 级别 1
# the-registerproperty-function

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅