@property

Experimental

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

@property CSS at-rule是CSS Houdini API的一部分, 它允许开发者显式地定义他们的css自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

@property 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何JS代码。有效的 @property 规则会注册一个自定义属性, 就像 CSS.registerProperty (en-US) 函数被使用同样的参数调用了一样。

Syntax(语法描述符)

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

一个有效的 @property 规则代表一项自定义属性的注册,使用自定义属性名作为规则内代码序列的序部。

@property 规则中 syntax 和 inherits 描述符是必需的; 如果其中任何一项缺失, 整条规则都将失效并且会被忽略。 initial-value 描述符仅在syntax描述符为通用syntax定义时是可选的，否则initial-value也是必需的——如果此时该描述符缺失,整条规则都将失效且被忽略。

未知的描述符自身都是无效的，且会被忽略。但是不会造成整条@property规则的失效。

实例

为 --my-color 自定义属性添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。

使用 CSS @property 规则:

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

使用 JavaScript中的 CSS.registerProperty (en-US)函数:

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

标准语法

@property <custom-property-name> {
  <declaration-list>
}

规范

规范 状态 提案
CSS Properties and Values API Level 1 Working Draft 初始定义.

浏览器兼容性

BCD tables only load in the browser

另见