The fallback value of the CSS variable is set through the second parameter of the var() function, which provides a default value when the variable is undefined or invalid. For example, in .box { background-color: var(--main-color, #ccc); }, if --main-color is undefined or invalid, the background color will use #ccc. The fallback value is suitable for various CSS value types, such as length, keywords and nested variables, such as: 1. Default spacing padding: var(--spacing, 1rem); 2. Font stack font-family: var(--heading-font, sans-serif); 3. Nested fallback color: var(--text-color, var(--default-text-color, black)); However, it should be noted that when the variable is defined but the type is illegal (such as --my-width: red; width: var(--my-width, 50%);), the fallback mechanism will not take effect. Best practices include: defining basic variables in :root, using semantic naming, keeping the fallback value concise, testing the variable missing scenario, and setting the fallback value to other variables to build the topic hierarchy.

You can set a fallback value for a CSS variable by using the second parameter in the var() function. This is super useful when you want to ensure a default value kicks in if the variable isn't defined or is invalid.

Why You Might Want to Use a Fallback

Sometimes, your CSS variables might not be defined due to scope issues, typos, or loading order problems. Rather than having styles break unexpectedly, a fallback gives you control over what happens in those cases.

For example:

 :root {
  /* --main-color might be missing or invalid */
}

.box {
  background-color: var(--main-color, #ccc);
}

In this case, if --main-color doesn't exist or is invalid, .box will use #ccc as its background color.

How to Apply Fallbacks in Different Contexts

Fallback values ??aren't just for colors — they work with any kind of CSS value, like lengths, keywords, or even other variables.

Here are some common use cases:

• Default spacing

   padding: var(--spacing, 1rem);

• Fallback font stack

   font-family: var(--heading-font, sans-serif);

• Nested fallback (using another variable)

   color: var(--text-color, var(--default-text-color, black));

This kind of nesting lets you build more robust themes and component systems.

When Fallbacks Won't Work

It's worth noting that fallbacks only help inside var() . If you're not using the var() syntax at all, there's no way for the browser to fall back. Also, the fallback won't apply if the variable exists but has an invalid property-specific value.

For instance:

 width: var(--my-width, 50%); /* works if --my-width is undefined or invalid */

But if you do something like this:

 --my-width: red;
width: var(--my-width, 50%); /* invalid for 'width', but still resolves to 'red' */

The browser will try to use red as a width, which doesn't make sense — but it won't fall back to 50% .

So, fallbacks don't protect against incorrect types — just missing or malformed variables.

Best Practices for Using Fallbacks

• Always define base variables on :root to avoid scoping issues.
• Use semantic names so it's clear what the fallback is for.
• Keep fallbacks simple unless you're intentionally building layered defaults.
• Test scenarios where a variable might be missing — especially in larger projects or design systems.

And one more tip: fallbacks can also be custom properties themselves, which is handy when organizing theme layers or providing dynamic defaults.

Basically, it's a small feature that adds a lot of flexibility without much overhead.

The above is the detailed content of How to set a fallback value for a CSS variable?. For more information, please follow other related articles on the PHP Chinese website!