inherits CSS at-rule descriptor
Baseline
2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The inherits CSS descriptor of the @property at-rule controls whether or not the registered CSS custom property inherits by default.
It is a required descriptor; if missing or invalid, the entire @property rule is invalid and ignored.
Syntax
css
/* Custom property does not inherit values */
inherits: false;
/* Custom property inherits values */
inherits: true;
Values
Formal definition
| Related at-rule | @property |
|---|---|
| Initial value | auto |
| Computed value | as specified |
Formal syntax
inherits =
true |
false
Examples
Setting inheritance behavior of a custom property
This example shows how to define a custom property --my-color that does not inherit its value from its parent elements:
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
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support