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 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 valuen/a (required)
Computed valueas 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:

Using CSS @property at-rule:

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

BCD tables only load in the browser

See also