HTML & CSS Interview Question #108

How do fallback values work with CSS custom properties?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

The var() function can provide a fallback that is used when the referenced custom property is missing or invalid in the relevant way. This makes components more resilient when optional theme or component values have not been defined.

Detailed Explanation

Fallbacks can also reference another custom property, which is useful for layered design-token systems.

Code Example

.card {
    color: var(--card-text, #1f2937);

    background:
        var(--card-background,
            var(--surface-color, white));
}