Theinitial-value descriptor of the@propertyat-rule specifies the initial value for the registeredCSS custom property.It is a required descriptor unless thesyntax 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: 16px;

Values

A value that matches the type specified in thesyntax descriptor.For example, ifsyntax is<color>, then theinitial-value must be a validcolor value.

If the value of thesyntax descriptor is not the universal syntax definition, theinitial-value descriptor has to be acomputationally independent value. This means the value can be converted into a computed value without depending on other values, except for "global" definitions independent of CSS. For example,10px is computationally independent—it doesn't change when converted to a computed value.2in is also valid, because1in is always equivalent to96px. However,3em is not valid, because the value of anem is dependent on the parent'sfont-size.

Formal definition

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;}

UsingJavaScriptCSS.registerProperty():

window.CSS.registerProperty({  name: "--my-color",  syntax: "<color>",  inherits: false,  initialValue: "#c0ffee",});

Specifications

Browser compatibility

See also

• Other@property descriptors:inherits andsyntax
• Registering CSS custom properties
• CSS Properties and Values API
• CSS Painting API
• CSS Typed Object Model
• Houdini APIs