这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
@property
CSS
at-rule
属于
CSS Houdini
umbrella of APIs, it allows developers to explicitly define their
css custom properties
, allowing for property type checking, setting default values, and define whether a property can inherit values or not.
@property
rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid
@property
rules result in a registered custom property, as if
CSS.registerProperty
had been called with equivalent parameters.
@property --propery-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
有效
@property
rule represents a custom property registration, with the property name being the serialization of the in the rule’s prelude.
@property
rules require a
syntax
and
inherits
descriptor; if either are missing, the entire rule is invalid and must be ignored. The
initial-value
descriptor is optional only if the syntax is the universal syntax definition, otherwise the descriptor is required; if it’s missing, the entire rule is invalid and must be ignored.
Unknown descriptors are invalid and ignored, but do not invalidate the
@property
rule.
Add type checking to
--my-color
custom property
, as a color, a default value, and not allow it to inherit its value:
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
使用
JavaScript
CSS.registerProperty
:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});
{{csssyntax}}
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Properties and Values API Level 1 | 工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
@property
Experimental
|
Chrome 完整支持 85 | Edge 完整支持 85 | Firefox 不支持 No | IE 不支持 No | Opera 完整支持 71 | Safari 不支持 No | WebView Android 完整支持 85 | Chrome Android 完整支持 85 | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。