inherits
Quick Summary for inherits (@property)
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Check the Browser compatibility table carefully before using this in production.
Code Usage for inherits (@property)
@property --property-name { syntax: '<color>'; inherits: false; initial-value: #c0ffee; } @property --property-name { syntax: '<color>'; inherits: true; initial-value: #c0ffee; }
More Details for inherits (@property)
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 HoudiniLast modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline