A CSS fallback is a backup value provided in your code for browsers that do not support a newer CSS feature. If a browser doesn't understand a specific property or value, it simply ignores it and uses the previously declared compatible style, ensuring your layout remains functional.
Example 1: CSS Gradients
.gradient-box {
/* A solid color fallback for older browsers */
background-color: #4A90E2;
/* The modern gradient for supported browsers */
background-image: linear-gradient(to right, #4A90E2, #00D2FF);
}
Explanation
In this example, a browser that supports linear-gradient will apply the gradient to the .gradient-box element. An older browser that does not recognize linear-gradient will ignore that line and apply the solid blue background-color as a fallback.
Example 2: CSS Variables (Custom Properties)
.alert {
/* Fallback color for browsers that don't support CSS Variables */
color: #cc0000;
/* Using a CSS Variable for modern browsers */
color: var(--alert-color, #cc0000);
}
Explanation
Here, color is first set to a hexadecimal red. The second color property attempts to use a CSS Variable named --alert-color. If the variable is not defined or the browser doesn't support variables, it will use the fallback value (#cc0000) provided within the var() function itself.
Example 3: Font Family Stack
body {
/* A stack of fonts, from preferred to fallback */
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
Explanation
The font-family property demonstrates a built-in fallback system. The browser will try to apply 'Open Sans' first. If that font is not available, it will move to 'Helvetica Neue', then to Arial, and finally, it will apply whatever default sans-serif font the system has available.
Example 4: Using the @supports rule
.container {
/* Fallback styles for older browsers */
float: left;
width: 50%;
}
/* Check if the browser supports CSS Grid */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
/* Reset the fallback styles */
float: none;
width: auto;
}
}
Explanation
The @supports at-rule checks for browser support before applying styles. Initially, .container is styled with float. However, if the browser understands display: grid, it will apply the styles within the @supports block, creating a modern grid layout and overriding the float-based fallback.
Example 5: Clamp Function Fallback
.responsive-text {
/* Fallback for older browsers */
font-size: 16px;
/* Fallback for browsers that support calc() but not clamp() */
font-size: calc(1rem + 0.5vw);
/* Modern, preferred method for fluid typography */
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
Explanation
This example provides a three-tier fallback for responsive text sizing. The browser will first try to use the clamp() function. If it fails, it will fall back to the calc() function. If neither are supported, it will default to the static 16px font size, ensuring readability on all devices.