Fallback Values and var()

The var() function accepts an optional second argument as a fallback value, used when the custom property is not defined.

The fallback is used when:

• The property is not defined in scope
• The property has the value initial
• The property was declared with an invalid value for its context

Nest var() calls to chain multiple fallback levels:

Fallbacks can be any valid value for the property — including other variables, computed values, or literals:

Setting a custom property to initial makes it as if it was never set. Combined with fallback, this lets components opt out of an inherited custom property.

Using initial as a custom property value is a technique to guarantee the fallback triggers. This can create optional feature flags in CSS.

The @property rule (Houdini) registers a typed custom property with a guaranteed initial value. This is more robust than relying on fallbacks.

Ensure transitions work even when a custom property is not set by providing a safe fallback that can be transitioned from:

If a custom property is missing and no fallback is provided, the property computes to its initial value (often initial keyword). For colors, this may produce unexpected transparent or black results. Always add fallbacks to critical properties.

Custom property values can themselves reference other custom properties, creating a chain of tokens:

Fallbacks have nothing to do with specificity — they only apply when the referenced custom property is undefined or invalid. Specificity determines which rule sets the custom property, not which fallback wins.

var(--name, fallback) provides a fallback when the custom property is not defined. Fallbacks can be nested for multiple levels. Use @property for typed custom properties with guaranteed initial values. Always provide fallbacks for critical visual properties.