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

@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

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 # inherits-descriptor

See also

CSS Properties and Values API CSS Painting API CSS Typed Object Model CSS Houdini

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)中文 (简体) Change language