The CSS if() function chooses a value inside a property declaration. It can test a custom property, a media condition, or browser support, then return the value from the first matching branch. This keeps a small conditional decision close to the property it controls.
You can use if() for status colors, responsive spacing, feature-dependent values, and theme tokens. It is a modern CSS feature with limited support in older browsers, so add an ordinary declaration before it as a fallback.
CSS if() Syntax
Each branch contains a condition, a colon, and the value to return. Separate branches with semicolons. An else branch supplies the final value when no earlier condition matches.
Syntax:
/* The first true condition supplies the property value. */
selector {
property: if(
condition-one: value-one;
condition-two: value-two;
else: fallback-value
);
}If no branch matches and you omit else, the function returns an empty token stream. That can make the declaration invalid, so an explicit else usually makes the intent clearer.
Types of Conditions
| Condition | What it checks | Typical use |
|---|---|---|
| style() | A custom property value on the element | Status, variant, or theme values |
| media() | A media feature or media type | Viewport, orientation, print, or preferences |
| supports() | Whether the browser understands a feature | Progressive enhancement |
Choose a Value from a Custom Property
A style condition currently tests custom properties rather than ordinary CSS properties. In the following rule, --state acts as a small input that controls the border and background values.
Example:
.notice {
/* These declarations remain when if() is unsupported. */
border-color: #64748b;
background: #f1f5f9;
/* Match the element's custom status value. */
border-color: if(
style(--state: success): #15803d;
style(--state: error): #b91c1c;
else: #64748b
);
background: if(
style(--state: success): #dcfce7;
style(--state: error): #fee2e2;
else: #f1f5f9
);
}
.notice--delivered { --state: success; }
.notice--failed { --state: error; }The browser checks branches in source order and stops at the first true condition. Put a more specific condition before a broad condition when both could match.
Use a Media Condition
A media condition can change one property value without repeating the entire rule. Use a regular @media block when several declarations must change together.
Example:
.product-grid {
display: grid;
/* Show one column on narrow screens and three otherwise. */
grid-template-columns: if(
media(width < 700px): 1fr;
else: repeat(3, 1fr)
);
gap: 1rem;
}Use a Supports Condition
A supports condition lets you choose a modern value when the browser recognizes it. The following border uses an oklch() color where available and a hexadecimal color elsewhere.
Example:
.profile-card {
/* Select a color value after testing browser support. */
border: 3px solid if(
supports(color: oklch(60% 0.2 250)): oklch(60% 0.2 250);
else: #2563eb
);
}Combine Conditions Carefully
You can use and, or, and not within supported condition types. Keep the expression short. When a condition begins to control several unrelated properties, a container query or media query block will be easier to maintain.
Example:
.toolbar {
/* Reduce the gap only on narrow landscape screens. */
gap: if(
media((width < 700px) and (orientation: landscape)): 0.25rem;
else: 1rem
);
}Try CSS if()
Choose a status in this example. JavaScript changes only the --state custom property, while CSS if() selects the visible colors.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS if() Status Cards</title>
<style>
body { font-family: Arial, sans-serif; max-width: 700px; margin: 30px auto; padding: 0 16px; }
label { display: block; margin-bottom: 8px; font-weight: bold; }
select { padding: 8px; }
.card {
--state: waiting;
margin-top: 20px;
padding: 20px;
border: 3px solid #64748b;
border-radius: 10px;
background: #f1f5f9;
color: #1e293b;
/* Modern browsers choose values from the first true branch. */
border-color: if(style(--state: success): #15803d; style(--state: error): #b91c1c; else: #64748b);
background: if(style(--state: success): #dcfce7; style(--state: error): #fee2e2; else: #f1f5f9);
}
</style>
</head>
<body>
<h1>Order Status</h1>
<label for="state">Choose a status</label>
<select id="state">
<option value="waiting">Waiting</option>
<option value="success">Delivered</option>
<option value="error">Delivery failed</option>
</select>
<section class="card" id="card">
<strong id="label">Waiting</strong>
<p>The card uses one rule and changes CSS values from a custom property.</p>
</section>
<script>
const select = document.querySelector('#state');
const card = document.querySelector('#card');
const label = document.querySelector('#label');
select.addEventListener('change', () => {
// Update the custom property tested by CSS if().
card.style.setProperty('--state', select.value);
label.textContent = select.options[select.selectedIndex].text;
});
</script>
</body>
</html>Provide a Browser Fallback
An else branch handles false conditions inside a browser that understands if(). It does not help a browser that cannot parse the function. Place a widely supported declaration first, followed by the enhanced declaration. CSS will ignore the unsupported declaration and keep the earlier value.
Tip: Test the layout in every browser version your users rely on. A fallback should preserve readable text, sufficient contrast, and usable spacing even when the conditional enhancement is missing.
Conclusion
The CSS if() function is a focused tool for selecting a single property value from style, media, or support conditions. Use an else branch, order conditions from specific to general, and keep a standard declaration before the modern one. For larger layout changes, continue to use regular conditional at-rules.