inherits

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

@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 value	`auto`
Computed value	as specified

Formal syntax

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:

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

Using JavaScript CSS.registerProperty:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});

Specifications

Specification
CSS Properties and Values API Level 1 (CSS Properties and Values API 1) # inherits-descriptor

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`inherits`	85	85	No	No	71	No	85	85	No	60	No	14.0