Fallback values in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are fallback values in CSS?

Fallback values are alternative CSS values used when the preferred value is not supported by the browser. They ensure the style still works and looks good.

beginner

How do you write fallback values for the font-family property?

List multiple font names separated by commas. The browser uses the first available font. Example: font-family: Arial, Helvetica, sans-serif;

intermediate

Why use fallback colors in CSS?

Fallback colors ensure text or backgrounds remain visible if a CSS function or variable is unsupported. For example, color: var(--main-color, black); uses black if the variable is missing.

intermediate

Example of fallback for a CSS gradient background?

Use a solid color before the gradient. Example: background: #333; background: linear-gradient(to right, #333, #666); The solid color shows if gradients are unsupported.

intermediate

What is the benefit of using fallback values in responsive design?

Fallback values help maintain usability and appearance on older browsers or devices that don’t support newer CSS features, improving accessibility and user experience.

What happens if a browser does not support the first font in a font-family list?

A It shows no text

B It uses the next font in the list

C It crashes

D It uses a random font

The browser tries fonts in order until it finds one installed or supported.

Which CSS property example shows a fallback color using a CSS variable?

A color: black, var(--main-color);

B color: black | var(--main-color);

C color: var(--main-color, black);

D color: var(--main-color);

The syntax var(--variable, fallback) uses the fallback if the variable is missing.

Why add a solid color before a gradient background?

A To center the gradient

B To make the gradient brighter

C To reduce file size

D To provide a fallback if gradients are unsupported

The solid color shows on browsers that don’t support gradients.

Which is NOT a reason to use fallback values?

A Make CSS code shorter

B Ensure content visibility

C Improve browser compatibility

D Enhance user experience on old devices

Fallbacks usually add code but improve compatibility and experience.

How do fallback values help with accessibility?

A By ensuring text and backgrounds remain visible

B By hiding content on unsupported browsers

C By disabling keyboard navigation

D By changing font sizes automatically

Fallbacks keep content readable even if some styles fail.

Explain what fallback values are in CSS and why they are important.

Think about what happens if a browser does not understand a CSS value.

Describe how to write fallback values for fonts and colors in CSS with examples.

Use commas for fonts and var() with a second argument for colors.