if()
The if() CSS function is an inline conditional value that returns a value based on a set of conditions. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The if() CSS function is an inline conditional value that returns a value based on a set of conditions. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
if Experimental | 137 | 137 | | | 137 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.box {
color: if(
style(--theme: dark): white;
else: black
);
}Live demo
Use cases
Use if()
Use if() when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply if() to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test if() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using if() does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features