Fallback values in CSS

Introduction

Fallback values help your website look good even if some styles are not supported by the browser.

When you want to use a new CSS feature but still support older browsers.

When you use custom fonts but want a common font if the custom one fails to load.

When you use colors or units that might not be recognized by all browsers.

When you want to provide a backup style for better user experience.

When you want to avoid broken or missing styles on different devices.

Syntax

CSS

property: preferred-value fallback-value;

The browser tries the values from left to right and uses the first one it understands.

Separate preferred and fallback values with commas or list them in order depending on the property.

Examples

The browser uses Arial if available, otherwise tries 'Helvetica Neue', then any sans-serif font.

CSS

font-family: Arial, 'Helvetica Neue', sans-serif;

The browser uses the CSS variable if defined, otherwise falls back to the hex color code.

CSS

color: var(--text-color, #ff0000);

The browser tries to load the WebP image first, if it fails, it loads the JPG image.

CSS

background-image: url('image.webp'), url('image.jpg');

Sample Program

This example shows three types of fallback:

• Font fallback: tries 'NonExistentFont', then Arial, then sans-serif.
• Background color fallback: uses CSS variable if set, otherwise lightblue.
• Background image fallback: tries WebP image first, then JPG.

If you open this in a browser, you will see the text in Arial because the first font does not exist, the background color is light blue if the CSS variable is not set, and the box shows the fallback image if the first image is missing.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fallback Values Example</title>
  <style>
    body {
      font-family: 'NonExistentFont', Arial, sans-serif;
      background-color: var(--main-bg-color, lightblue);
      color: black;
      padding: 2rem;
    }
    .box {
      width: 10rem;
      height: 10rem;
      background-image: url('nonexistent.webp'), url('fallback.jpg');
      background-size: cover;
      border: 2px solid black;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <h1>Fallback Values in CSS</h1>
  <p>This text uses a font fallback: if 'NonExistentFont' is not found, it uses Arial.</p>
  <p>The background color uses a CSS variable with a fallback color.</p>
  <div class="box" aria-label="Box with fallback background image"></div>
</body>
</html>

Important Notes

Always list fallback values from most specific to most general.

Use fallback fonts and colors to keep your site readable and attractive on all browsers.

Test your site in different browsers to see how fallbacks work.

Summary

Fallback values provide backup styles when the main style is not supported.

They improve website compatibility and user experience.

Use them for fonts, colors, images, and CSS variables.

Practice

1. What is the main purpose of using fallback values in CSS?

easy

A. To make the website load faster

B. To provide backup styles if the main style is not supported

C. To add animations to elements

D. To change the HTML structure dynamically

Solution

1. Step 1: Understand fallback values concept

   Fallback values are used to ensure styles still apply if the preferred style is unsupported by the browser.

2. Step 2: Identify the purpose from options

   Only To provide backup styles if the main style is not supported correctly describes fallback values as backup styles.

3. Final Answer:

   To provide backup styles if the main style is not supported -> Option B

4. Quick Check:

   Fallback values = backup styles [OK]

Hint: Fallback means backup style if main fails [OK]

Common Mistakes:

• Thinking fallback speeds up loading
• Confusing fallback with animations
• Believing fallback changes HTML

2. Which of the following is the correct way to provide fallback fonts in CSS?

easy

A. font-family: sans-serif 'Open Sans';

B. font-family: 'Open Sans';

C. font-family: Arial 'Open Sans';

D. font-family: 'Open Sans', Arial, sans-serif;

Solution

1. Step 1: Recall font-family syntax with fallbacks

   Fallback fonts are listed separated by commas, from preferred to generic.

2. Step 2: Check each option's syntax

   font-family: 'Open Sans', Arial, sans-serif; correctly lists 'Open Sans', then Arial, then generic sans-serif with commas.

3. Final Answer:

   font-family: 'Open Sans', Arial, sans-serif; -> Option D

4. Quick Check:

   Fallback fonts use commas [OK]

Hint: Separate fallback fonts with commas [OK]

Common Mistakes:

• Missing commas between fonts
• Wrong order of fonts
• Using quotes incorrectly

3. What color will the text be if the browser does not support CSS variables in this code?

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

medium

A. Blue

B. The color defined by --main-color variable

C. Black (default color)

D. Transparent

Solution

1. Step 1: Understand CSS variable fallback syntax

   The syntax var(--main-color, blue) means use --main-color if supported, else fallback to blue.

2. Step 2: Consider browser support for CSS variables

   If the browser does not support CSS variables, it uses the fallback value blue.

3. Final Answer:

   Blue -> Option A

4. Quick Check:

   Fallback value used when variable unsupported [OK]

Hint: Fallback after comma used if variable unsupported [OK]

Common Mistakes:

• Assuming variable always works
• Choosing default black color
• Confusing fallback with transparency

4. Identify the error in this CSS fallback usage:

div { background-image: url('image.webp', 'image.png'); }

medium

A. Fallback images require multiple url() functions separated by commas

B. Only one URL is allowed inside url() function

C. The URLs should be separated by commas as shown

D. Fallback images are not supported in CSS

Solution

1. Step 1: Understand fallback for background images

   Fallback images are provided by listing multiple url() functions separated by commas.

2. Step 2: Analyze the given code

   The code incorrectly puts two URLs inside one url() function, which is invalid syntax.

3. Step 3: Correct usage

   Correct syntax: background-image: url('image.webp'), url('image.png');

4. Final Answer:

   Fallback images require multiple url() functions separated by commas -> Option A

5. Quick Check:

   Multiple url() with commas for fallback [OK]

Hint: Use separate url() calls for fallback images [OK]

Common Mistakes:

• Putting multiple URLs inside one url()
• Missing commas between url() functions
• Thinking fallback images not supported

5. You want to set a CSS variable --primary-color with a fallback to green if the variable is not defined. Which CSS rule correctly applies this fallback to the text color and background-color?

hard

A. color: var(--primary-color, green); background-color: var(--primary-color);

B. color: var(--primary-color); background-color: green;

C. color: var(--primary-color, green); background-color: var(--primary-color, green);

D. color: green; background-color: var(--primary-color, green);

Solution

1. Step 1: Understand fallback usage for CSS variables

   To ensure fallback works for both color and background-color, each var() must include fallback.

2. Step 2: Analyze each option

   color: var(--primary-color, green); background-color: var(--primary-color, green); uses var(--primary-color, green) for both properties, ensuring fallback if variable undefined.

3. Step 3: Why others are incorrect

   color: var(--primary-color, green); background-color: var(--primary-color); misses fallback for background-color; B misses fallback for color; C sets color fixed to green ignoring variable.

4. Final Answer:

   color: var(--primary-color, green); background-color: var(--primary-color, green); -> Option C

5. Quick Check:

   Fallback in each var() call needed [OK]

Hint: Add fallback inside every var() call [OK]

Common Mistakes:

• Adding fallback only once
• Setting fixed color ignoring variable
• Forgetting fallback for background-color