initial-value
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
css
@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
initial-value =
<declaration-value>?
Examples
Add type checking to --my-color custom property, as a color, the initial-value being a valid color:
css
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
Using JavaScript CSS.registerProperty():
js
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
Specifications
| Specification |
|---|
| CSS Properties and Values API Level 1 # initial-value-descriptor |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
initial-value descriptor | |||||||||||