CSS has always been a language of rules: selectors, properties, and values. For years, developers have relied on tricks—like CSS variables, calc(), or even JavaScript—to conditionally change styles. But with the introduction of the if() function, CSS has entered a new era of dynamic, conditional styling. Imagine deciding styles directly in CSS based on logical conditions, without a single line of JavaScript. This isn’t a distant dream—it’s here, and it’s a game-changer.
In this article, we’ll explore how if() works, its syntax, real-world examples, and advanced tricks, empowering you to elevate your frontend development.
How Does if() Work?
The CSS if() function works like any traditional conditional statement you know from programming languages:
if(condition, value-if-true, value-if-false)
- condition – A logical expression that evaluates to
trueorfalse. - value-if-true – The value returned if the condition is true.
- value-if-false – The value returned if the condition is false.
Think of it as a ternary operator in CSS, enabling inline logic:
.button {
background-color: if(var(--is-primary), blue, gray);
}
If --is-primary is true, the button is blue; otherwise, gray. Simple, clean, and elegant.
Syntax and Logic — Making It Clean
The beauty of if() lies in clarity and composability. You can nest conditions or combine them with other CSS functions like var(), calc(), or even media queries.
Basic Syntax
property: if(condition, value-if-true, value-if-false);
Nested Example
.card {
border-color: if(var(--is-active),
if(var(--is-error), red, green),
gray);
}
- If
--is-activeis true and--is-erroris true → red - If
--is-activeis true and--is-erroris false → green - If
--is-activeis false → gray
This nested structure keeps your styles self-contained and readable, eliminating the need for complex JS toggles.
Real-World Examples and Use Cases
1. Theming
Dynamic theming is easier than ever. Suppose you want to switch between light and dark themes:
<button class="theme-button">Click Me</button>
body {
background-color: if(var(--dark-mode), #121212, #ffffff);
color: if(var(--dark-mode), #ffffff, #000000);
}
.theme-button {
background-color: if(var(--dark-mode), #1f1f1f, #eee);
color: if(var(--dark-mode), #fff, #000);
}
2. Responsive Design
if() can react to inline media queries:
<div class="responsive-box">Responsive Box</div>
.responsive-box {
width: if(media(min-width: 768px), 70%, 100%);
font-size: if(media(min-width: 768px), 1.5rem, 1rem);
padding: if(media(min-width: 768px), 2rem, 1rem);
}This reduces dependency on multiple CSS rules or media query blocks.
3. UI State Visualization
Imagine a component whose color reflects multiple states:
<div class="alert" style="--alert-state: error;">Error Message</div>
<div class="alert" style="--alert-state: warning;">Warning Message</div>
<div class="alert" style="--alert-state: success;">Success Message</div>
.alert {
padding: 1rem;
color: white;
background-color: if(var(--alert-state) == "error", red,
if(var(--alert-state) == "warning", orange, green));
}
- Error Message
- Warning Message
- Success Message
4. Inline Support Queries
if() integrates seamlessly with supports():
<div class="box">Supports Check</div><br>.box {
display: if(supports(display: grid), grid, flex);
}
This allows progressive enhancement without bloated CSS.
5. Inline Media Queries
<header class="header">Header Text</header>.header {
font-size: if(media(min-width: 600px), 2rem, 1.5rem);
}
Perfect for adaptive typography directly in your declarations.
Frequency and Position of else : <value> Pairs
Unlike programming languages, if() in CSS allows multiple “else” values in nested conditions:
border-color: if(var(--state) == "error", red,
if(var(--state) == "warning", yellow, green));
- First match wins — order matters
- Default fallback — always provide a final
elsevalue
This ensures predictable styling without surprises.
Additional Things You Can Do With if()
Many developers overlook these powerful capabilities:
- Combine with
calc()
width: calc(100% - if(var(--sidebar-open), 250px, 0));
- Dynamic box shadows, borders, and gradients
- Conditional animations or transitions
- Variable-driven component theming
if() and calc() — When the Math Isn’t Mathing
Combining if() and calc() allows mathematical operations based on conditions:
.card {
width: calc(100% - if(var(--has-sidebar), 300px, 0px));
}
This approach keeps calculations inline, eliminating the need for extra CSS classes or JS toggles.
Browser Support and Future Implications
Currently, the if() function is supported in modern Chrome versions and is being explored in other browsers. Pairing if() with supports() ensures graceful degradation:
.example {
color: if(supports(color: lab(50% 0 0)), lab(50% 0 0), #333);
}
Future implications:
- Reduced JS dependency for state-driven UI
- Cleaner, maintainable CSS
- Simplified theming, responsive, and adaptive designs
The supports() and media() Statements
if() plays nicely with supports() and media():
.box {
display: if(supports(display: grid), grid, flex);
font-size: if(media(min-width: 768px), 1.5rem, 1rem);
}
This makes CSS more intelligent, like a mini programming language inside your stylesheet.
Emotional & Persuasive Conclusion
Frontend development is evolving, and CSS is no longer static. The if() function allows us to think logically in CSS, reducing JS dependency and making styles more maintainable.
Imagine smarter, cleaner, and conditional styles without sacrificing readability. For developers, this is not just a feature — it’s a revolution in how we approach styling. Embrace the if() function, experiment boldly, and write CSS that thinks.
The future of CSS is dynamic, conditional, and elegant — and with if(), you’re at the forefront.