inherits
Experimental
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The inherits
CSS descriptor is required when using the @property
at-rule
and controls whether the custom property registration specified by @property
inherits by default.
Syntax
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
@property --property-name {
syntax: '<color>';
inherits: true;
initial-value: #c0ffee;
}
Values
true
- The property inherits by default.
false
- The property does not inherit by default.
Formal definition
Related at-rule | @property |
---|---|
Initial value | auto |
Computed value | as specified |
Formal syntax
true | false
Examples
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;
}
Using JavaScript CSS.registerProperty
:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});
Specifications
Specification | Status | Comment |
---|---|---|
CSS Properties and Values API Level 1 The definition of 'inherits' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
BCD tables only load in the browser