inherits
Baseline 2024Newly 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inherits descriptor |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- Other
@property
descriptors:initial-value
andsyntax
- CSS Properties and Values API
- CSS Painting API
- CSS Typed Object Model
- Houdini APIs