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

inherits

Experimental: This is an experimental technologyCheck 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

The property inherits by default.

The property does not inherit by default.

Formal definition

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

See also

Last modified: Aug 12, 2021, by MDN contributors