initial-value
Baseline
2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The initial-value descriptor of the @property at-rule specifies the initial value for the registered CSS custom property.
It is a required descriptor unless the syntax descriptor value is the universal syntax (*).
If required but missing or invalid, the entire @property rule is invalid and ignored.
Syntax
/* Set initial color value */
initial-value: rebeccapurple;
/* Set initial length value */
initial-value: 2rem;
Values
A value that matches the type specified in the syntax descriptor.
For example, if syntax is <color>, then the initial-value must be a valid color value.
Formal definition
| Related at-rule | @property |
|---|---|
| Initial value | n/a (required) |
| Computed value | as specified |
Formal syntax
initial-value =
<declaration-value>?
Examples
Setting an initial value for a custom property
This example shows how to define a custom property --my-color with an initial color value of #c0ffee. This initial value will be used when the property is not inherited (inherits: false) and no other value is set on the element.
@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 |
Browser compatibility
Loading…
See also
- Other
@propertydescriptors:inheritsandsyntax - CSS Properties and Values API
- CSS Painting API
- CSS Typed Object Model
- Houdini APIs