Fallback values in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What color will the text be?

Given the CSS below, what color will the text inside the <p> tag appear as if the variable --main-color is NOT defined?

CSS

p {
  color: var(--main-color, blue);
}

A The text will be red.

B The text will be black (default browser color).

C The text will be transparent.

D The text will be blue.

💡 Hint

Look at the second value inside the var() function.

The CSS uses a fallback value 'blue' for the custom property '--main-color'. If '--main-color' is not defined, the fallback 'blue' is used.

🧠 Conceptual

intermediate

Why use fallback values in CSS variables?

Which of the following is the main reason to use fallback values with CSS variables?

A To make the CSS file smaller.

B To provide a default style if the variable is not set or supported.

C To speed up the browser rendering process.

D To disable the variable feature in older browsers.

💡 Hint

Think about what happens if a variable is missing.

Fallback values ensure the style still works even if the variable is missing or unsupported, improving robustness.

❓ rendering

advanced

What background color will the box have?

Consider this CSS snippet. What background color will the <div> have if the browser supports CSS variables but the variable --bg-color is NOT defined anywhere?

CSS

div {
  background-color: var(--bg-color, lightgray);
  width: 100px;
  height: 100px;
}

A The background color will be lightgray.

B The background color will be the value of --bg-color.

C The background color will be black.

D The background color will be transparent.

💡 Hint

If the variable is missing, what does the fallback do?

The fallback value 'lightgray' is used because the variable '--bg-color' is not defined.

❓ selector

advanced

Which CSS rule applies fallback correctly?

Which of the following CSS rules correctly uses a fallback value for the font size variable --font-size?

A font-size: var(--font-size, 16px);

B font-size: var(--font-size) || 16px;

C font-size: var(--font-size); fallback: 16px;

D font-size: var(--font-size 16px);

💡 Hint

Check the syntax of the var() function.

The correct syntax for fallback is var(--variable, fallback). Options A, C, and D are invalid CSS syntax.

❓ accessibility

expert

How do fallback colors affect accessibility?

If a CSS variable for text color is missing and the fallback color has poor contrast with the background, what is the best practice to maintain accessibility?

A Rely on browser defaults for color if the variable is missing.

B Use transparent fallback colors to avoid conflicts.

C Choose fallback colors with good contrast to ensure readability.

D Use the same color for fallback as the background color.

💡 Hint

Think about how color contrast affects people with vision difficulties.

Fallback colors should always maintain good contrast to keep text readable for all users, including those with visual impairments.