CSS Properties 和 Values API - 允许开发人员显式定义其 CSS 自定义属性

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSS Properties 和 Values API（CSS 属性和值 API）（属于 CSS Houdini API 的一部分）允许开发人员显式定义其 CSS 自定义属性，从而允许进行属性类型检查，默认值以及是否继承其值的属性。

接口

定义浏览器应如何解析 css 自定义属性。通过 JavaScript 中的 CSS.registerProperty 访问此接口。

定义浏览器应如何解析 css 自定义属性。通过 CSS 的 @property at-rule 访问此接口。

下面使用 JavaScript 中的 CSS.registerProperty 来输入一个 css 自定义属性，--my-color，作为一个颜色，给它一个默认值，并且不允许它继承其值。

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

可以使用 @property at-rule 在 CSS 中注册相同的内容：

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

规范	状态	备注
CSS Properties and Values API Level 1	工作草案	初始定义。

参见各个接口页面。