inherits

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 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

true

The property inherits by default.

false

The property does not inherit by default.

Formal definition

Related at-rule@property
Initial valueauto
Computed valueas 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:

Using CSS @property at-rule:

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

BCD tables only load in the browser

See also