initial-value
Quick Summary for initial-value (@property)
Check the Browser compatibility table carefully before using this in production.
Code Usage for initial-value (@property)
@property --property-name { syntax: '<color>'; inherits: false; initial-value: #c0ffee; } @property --property-name { syntax: '<color>'; inherits: true; initial-value: #c0ffee; }
More Details for initial-value (@property)
initial-value
Experimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The initial-value
CSS descriptor is required when using the @property
at-rule
unless the syntax accepts any valid token stream. It sets the initial-value for the property.
The value chosen as the initial-value
must parse correctly according to the syntax definition. Therefore, if syntax is <color>
then the initial-value must be a valid color
value.
Syntax
@property --property-name { syntax: '<color>'; inherits: false; initial-value: #c0ffee; } @property --property-name { syntax: '<color>'; inherits: true; initial-value: #c0ffee; }
Values
A string with a value which is a correct value for the chosen syntax
.
Formal definition
Related at-rule | @property |
---|---|
Initial value | n/a (required) |
Computed value | as specified |
Formal syntax
<string>
Examples
Add type checking to --my-color
custom property
, as a color, the initial-value being a valid color:
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 # initial-value-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