inherits

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