Fallback Values and var()
Provide fallback values in var() for when a custom property is undefined or invalid.
Fallback Values and var() is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
var() Fallback Syntax
The var() function accepts an optional second argument as a fallback value, used when the custom property is not defined.
.button {
background: var(--primary-color, royalblue);
/* Uses royalblue if --primary-color is not defined */
}When Fallbacks Apply
The fallback is used when:
- The property is not defined in scope
- The property has the value
initial - The property was declared with an invalid value for its context
Multiple Levels of Fallback
Nest var() calls to chain multiple fallback levels:
.text {
color: var(--color-primary, var(--color-brand, #3b82f6));
/* Try --color-primary, then --color-brand, then hardcode */
}Fallback Can Be Any Value
Fallbacks can be any valid value for the property — including other variables, computed values, or literals:
.card {
padding: var(--card-padding, var(--spacing-md, 16px));
border-radius: var(--radius, 50%);
}The initial Keyword
Setting a custom property to initial makes it as if it was never set. Combined with fallback, this lets components opt out of an inherited custom property.
.no-theme {
--primary-color: initial; /* stops inheritance */
}
.button {
background: var(--primary-color, gray);
/* Fallback gray is used inside .no-theme */
}Guaranteed Invalid Value
Using initial as a custom property value is a technique to guarantee the fallback triggers. This can create optional feature flags in CSS.
Custom Property + @property
The @property rule (Houdini) registers a typed custom property with a guaranteed initial value. This is more robust than relying on fallbacks.
@property --progress {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.bar {
width: var(--progress); /* safe, always defined */
}Fallback for Animation-Safe Values
Ensure transitions work even when a custom property is not set by providing a safe fallback that can be transitioned from:
.modal {
opacity: var(--modal-opacity, 0);
transition: opacity 300ms;
}Debugging Missing Variables
If a custom property is missing and no fallback is provided, the property computes to its initial value (often initial keyword). For colors, this may produce unexpected transparent or black results. Always add fallbacks to critical properties.
var() in Custom Properties
Custom property values can themselves reference other custom properties, creating a chain of tokens:
:root {
--hue: 220;
--color-primary: hsl(var(--hue), 70%, 50%);
--color-light: hsl(var(--hue), 70%, 80%);
}Fallback and Specificity
Fallbacks have nothing to do with specificity — they only apply when the referenced custom property is undefined or invalid. Specificity determines which rule sets the custom property, not which fallback wins.
Quick Check
What does color: var(--theme-text, #111) do when --theme-text is not defined?
Recap
var(--name, fallback) provides a fallback when the custom property is not defined. Fallbacks can be nested for multiple levels. Use @property for typed custom properties with guaranteed initial values. Always provide fallbacks for critical visual properties.
Frequently asked questions
Is the “Fallback Values and var()” lesson free?
Yes — the full text of “Fallback Values and var()” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Fallback Values and var()”?
Provide fallback values in var() for when a custom property is undefined or invalid. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Fallback Values and var()” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.