Introduction 🚀
CSS just got an upgrade! With the new if() function, you can now make your styles dynamic and responsive without touching JavaScript.
1. CSS copied JS
CSS just copied something from JavaScript…
and it changes everything.
For years, if you wanted to change a CSS style based on a condition, you had three options:
- Write JavaScript
- Multiply media queries
- Use long, complicated class names
Today, you can write conditions directly in CSS.
The if() function just arrived in Chrome 137.
A single HTML attribute can now change your entire design.
Zero JavaScript needed.
2. The only Downside
It’s only available on Chrome/Edge for now.
Firefox and Safari will follow.
But the future of CSS just got a lot more logical.
3. Usage examples
It also works for:
- Responsive design (replaces traditional media queries)
- Dark mode (in just 3 lines)
- Browser feature detection
.card {
border-color: if(
style(--status: pending): blue;
style(--status: complete): green;
else: gray
);
}Conclusion ✅
If you found this article is valuable and useful, share it. 🙏♻
Frequently Asked Questions
Can if() replace JavaScript?
No. It only chooses CSS values; it cannot execute logic or manipulate the DOM.
Does if() work with media queries?
No. It evaluates CSS conditions, not media queries.
Is the if() function production-ready?
It depends on your target browsers, as support is still evolving.
Can if() be nested?
Yes, nested if() expressions are allowed for more complex conditions.
Is if() the same as Sass @if?
No. Sass @if is evaluated during compilation, while CSS if() is evaluated by the browser at runtime.
