@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
自定义属性
添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。
@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 = @property <custom-property-name> { <declaration-list> }
规范
Specification |
---|
CSS Properties and Values API Level 1 # at-property-rule |
浏览器兼容性
BCD tables only load in the browser