var() Fallbacks
The var() function can provide a fallback value when a custom property is invalid or unavailable in the relevant context. Fallbacks can contain another custom property.
This is particularly useful for component APIs and progressive enhancement.
var() Fallback Resolution
Variable Fallback
.button {
color: var(--button-text, white);
background: var(--button-background, #2563eb);
}💡 If the custom properties are not available, the fallback values are used.
Key Takeaways
- Fallbacks make custom-property APIs more resilient.
- Custom properties can reference other custom properties.
Knowledge Check
What does the second argument of `var(--color, blue)` represent?