Game-Changer for CSS: IF Conditions Have Arrived!

A powerful addition is making its way into CSS: the if() function. Long desired by developers, this function finally introduces basic conditional logic directly into CSS. No JavaScript, no hacks, no workarounds. Let’s break down what it is, how it works, and how it can change the way you write styles.

What is the CSS if() Function?

The if() function allows you to write conditional logic directly inside CSS property values. Think of it like a CSS-native ternary operator:

if(condition: value-if-true; else: value-if-false)

This means CSS can now evaluate conditions at runtime (based on variables or other expressions) and apply different styles accordingly—without leaving the stylesheet.

It’s currently part of the CSS Values and Units Module Level 5 and has officially landed in Chrome 137!

Example

.container {
  --is-large: 1; /* 1 = large, 0 = small */

  width: if(
    style(--is-large: 1): 500px;
    else: 300px
  );
}

If the CSS variable --is-large equals 1, the element will have a width of 500px. Otherwise, it will be 300px.

Use Cases in CSS

Theming with a Single Line of Logic

Themes often require toggling between values like light/dark or compact/comfortable. Instead of duplicating styles or adding modifier classes, you can now write:

background-color: if(
  style(--dark-mode: 1): black;
  else: white
);
color: if(
  style(--dark-mode: 1): white;
  else: black
);

Leverage CSS variables to create dynamic and responsive designs without relying on JavaScript

:root {
  /* Modern | Hacker | Rockstar */
  --theme: "Hacker";

  body {
    color: if(
      style(--theme: "Modern"): hsl(146 50% 3%);
      style(--theme: "Hacker"): hsl(43 74% 3%);
      style(--theme: "Rockstar"): hsl(282 47% 3%)
    );
    background: if(
      style(--theme: "Modern"): hsl(146 50% 40%);
      style(--theme: "Hacker"): hsl(43 74% 64%);
      style(--theme: "Rockstar"): hsl(282 47% 56%)
    );
    transition: 400ms;
  }
}

The :root pseudo-class is typically used to define global CSS variables, making them accessible throughout the document. By placing the if() function inside :root, you can define conditional styles based on the values of these global variables. This approach allows for more dynamic and responsive styling without the need for JavaScript.

Responsive Layout Tweaks Based on Container Queries

Let’s say you’re using container queries and exposing a flag via a custom property:

--is-narrow: 1;

font-size: if(
  style(--is-narrow: 1): 14px;
  else: 18px
);

This enables components to adjust based on their container’s characteristics rather than relying solely on viewport size.

Accessibility Preferences

You can tie styles to user accessibility settings passed via variables:

font-weight: if(
  style(--accessibility-mode: bold): 700;
  else: 400
);

Enables visual customization based on user preference, with no JavaScript overhead.

Fallbacks and Progressive Enhancement

if() can act as a graceful degradation mechanism:

--supports-grid: 1;

display: if(
  style(--supports-grid: 1): grid;
  else: block
);

Combined with @supports, this helps deliver smart styling even in older browsers.

Feature Toggles in Design Systems

If your design system has experimental toggles or feature flags:

border-radius: if(
  style(--new-style-enabled: 1): 12px;
  else: 4px
);

This keeps your CSS clean and minimizes the need for class-based overrides.

How is This Different From @media or @supports?

While @media and @supports control entire rule blocks, if() lets you conditionally change individual property values inline. It’s finer-grained control, with less repetition and more flexibility.

What Are the Limitations?

• Only Chrome 137+ supports it (for now)
• No complex logic or loops
• Comparisons are limited to values the CSS engine can evaluate
• Relies on CSS custom properties—so keep them clean

Why It Matters

The if() function marks a major leap forward for CSS. It unlocks:

• Cleaner, smarter stylesheets
• Less class bloat and override madness
• More power from your existing custom properties
• Better support for context-aware components

The web just got a logic boost. While this isn’t full-blown programming, it’s a massive win for dynamic, maintainable CSS. Play around with it in Chrome 137+, and watch the rest of the browser world catch up. This little function might be your new favorite tool.