CSS變量的回退值通過(guò)var()函數(shù)的第二個(gè)參數(shù)設(shè)置，用於在變量未定義或無(wú)效時(shí)提供默認(rèn)值。例如，在.box { background-color: var(--main-color, #ccc); }中，若--main-color未定義或無(wú)效，則背景色會(huì)使用#ccc?；赝酥颠m用於各種CSS值類(lèi)型，如長(zhǎng)度、關(guān)鍵字及嵌套變量，例如：1. 默認(rèn)間距padding: var(--spacing, 1rem);；2. 字體棧font-family: var(--heading-font, sans-serif);；3. 嵌套回退color: var(--text-color, var(--default-text-color, black));。但需注意，當(dāng)變量已定義但類(lèi)型不合法時(shí)（如--my-width: red; width: var(--my-width, 50%);），回退機(jī)制不會(huì)生效。最佳實(shí)踐包括：在:root中定義基礎(chǔ)變量、使用語(yǔ)義化命名、保持回退值簡(jiǎn)潔、測(cè)試變量缺失場(chǎng)景，並可將回退值設(shè)為其他變量以構(gòu)建主題層級(jí)。

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.

以上是如何為CSS變量設(shè)置後備值？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！