The CSS if() Function

Remember when you needed JavaScript for conditional styling? Those days are numbered. The CSS if() function is here, bringing conditional logic directly to your stylesheets. No more CSS-in-JS just for simple conditions!

What does it do?

The if() function lets you apply different values based on conditions - media queries, feature support, or even custom properties:

.element {
  background: if(
    media(width > 700px): linear-gradient(45deg, blue, purple);
    else: solid #333;
  );
}

This changes the background based on screen width. Simple as that.

Basic Syntax

The function takes condition-value pairs separated by semicolons:

.card {
  padding: if(
    media(width < 600px): 1rem;
    else: 2rem;
  );
}

Each condition is followed by a colon and its value. The else clause is optional but recommended as a fallback.

Style Queries

The most interesting use case is with custom properties:

:root {
  --theme: dark;
}

.button {
  background: if(
    style(--theme: dark): #333;
    style(--theme: light): #fff;
    else: #666;
  );
}

This checks the value of CSS custom properties and styles accordingly. Perfect for theme switching!

Media Queries

You can embed media queries directly in your properties:

.sidebar {
  width: if(
    media(width > 1200px): 300px;
    media(width > 800px): 250px;
    else: 100%;
  );
}

No more separate @media blocks for simple responsive values.

Feature Queries

Check for browser feature support:

.modern-element {
  color: if(
    supports(color: lch(50% 50 180)): lch(50% 50 180);
    else: hsl(180, 50%, 50%);
  );
}

This uses the new LCH color space if supported, falls back to HSL otherwise.

Multiple Conditions

You can chain multiple conditions:

.element {
  font-size: if(
    style(--size: xl): 2rem;
    style(--size: lg): 1.5rem;
    style(--size: md): 1.25rem;
    else: 1rem;
  );
}

The first matching condition wins.

Use in Shorthand Properties

The if() function works inside shorthand properties too:

.box {
  border: 2px if(
    style(--variant: success): solid green;
    style(--variant: error): dashed red;
    else: solid gray;
  );
}

Only the conditional part changes, the rest stays the same.

Important Rules

No spaces around if: There must be no space between if and the opening parenthesis, or the whole declaration becomes invalid.

/* ✅ Good */
.good { color: if(media(width > 500px): red; else: blue;); }

/* ❌ Bad - space breaks it */
.bad { color: if (media(width > 500px): red; else: blue;); }

Semicolons matter: Each condition-value pair needs a semicolon (except the last one).

Browser Support

Here's the reality check: extremely limited browser support right now. It's experimental and only available behind flags in some browsers.

Chrome/Edge: Behind experimental flag Firefox: Under development
Safari: No support yet

Why This Matters

The if() function represents a major shift in CSS capabilities:

• Fewer JavaScript dependencies for conditional styling
• Cleaner component code with logic in CSS
• Better performance by avoiding CSS-in-JS runtime overhead
• More maintainable responsive and theme code

Conclusion

The CSS if() function is still experimental, but it's already showing massive potential for cleaner, more maintainable stylesheets. While browser support catches up, start thinking about how conditional CSS could simplify your codebase.

Soon, we might not need JavaScript for basic conditional styling at all!

Have you been using CSS custom properties for conditional styling? Let me know how you're handling themes and responsive design!

References:

• MDN: CSS if() function
• Chrome Blog: CSS if() function
• CSS-Tricks: CSS if() function