0
0
CSSmarkup~5 mins

Fallback values in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.