inherits
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
css
@property --property-name {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
@property --property-name {
syntax: "<color>";
inherits: true;
initial-value: #c0ffee;
}
Values
Formal definition
| Related at-rule | @property |
|---|---|
| Initial value | auto |
| Computed value | as specified |
Formal syntax
inherits =
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:
css
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
Using JavaScript CSS.registerProperty():
js
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
Specifications
| Specification |
|---|
| CSS Properties and Values API Level 1 # inherits-descriptor |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
inherits descriptor | |||||||||||