Unlock Conditional Styling with CSS if(): A Game‑Changer for Frontend Development

Imagine being able to set CSS properties directly based on conditions—no JavaScript, no preprocessors, no work‑arounds. The new CSS if() function, shipped in Chrome 137, makes this possible.

For years developers have relied on JavaScript class toggles, pre‑processor mixins, or massive media‑query blocks. The if() function brings conditional logic into pure CSS, offering a declarative and efficient solution.

How It Works

property: if(
  condition-1: value-1;
  condition-2: value-2;
  condition-3: value-3;
  else: default-value
);

The function evaluates each condition in order and applies the first matching value; if none match, the else value is used, mirroring typical programming language behavior.

Three Capabilities of the if() Function

1. Style Queries

Using style(), you can react to custom CSS properties:

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    style(--status: error): crimson;
    else: gray
  );
}

A single data-status attribute now controls the entire component style without utility classes.

2. Media Queries

With media(), responsive values can be defined inline, eliminating nested media blocks:

h1 {
  font-size: if(
    media(width >= 1200px): 3rem;
    media(width >= 768px): 2.5rem;
    media(width >= 480px): 2rem;
    else: 1.75rem
  );
}

3. Feature Detection

The supports() function lets you test browser capabilities directly in a property:

.element {
  border-color: if(
    supports(color: lch(0 0 0)): lch(50% 100 150);
    supports(color: lab(0 0 0)): lab(50 100 -50);
    else: rgb(200, 100, 50)
  );
}

Practical Use Cases

Dark Mode in Three Lines

body {
  --theme: "dark";
  background: if(
    style(--theme: "dark"): #1a1a1a;
    else: white
  );
  color: if(
    style(--theme: "dark"): #e4e4e4;
    else: #333
  );
}

Design‑System Status Component

.alert {
  --type: attr(data-type type(<custom-ident>));
  background: if(
    style(--type: success): #d4edda;
    style(--type: warning): #fff3cd;
    style(--type: danger): #f8d7da;
    style(--type: info): #d1ecf1;
    else: #f8f9fa
  );
  border-left: 4px solid if(
    style(--type: success): #28a745;
    style(--type: warning): #ffc107;
    style(--type: danger): #dc3545;
    style(--type: info): #17a2b8;
    else: #6c757d
  );
}

Container Without Complex Media Queries

.container {
  width: if(
    media(width >= 1400px): 1320px;
    media(width >= 1200px): 1140px;
    media(width >= 992px): 960px;
    media(width >= 768px): 720px;
    media(width >= 576px): 540px;
    else: 100%
  );
  padding-inline: if(
    media(width >= 768px): 2rem;
    else: 1rem
  );
}

Combining with Modern CSS Features

.element {
  color: if(
    style(--high-contrast: true): black;
    else: light-dark(#333, #e4e4e4)
  );
  padding: if(
    style(--spacing: loose): var(--spacing-function(2));
    style(--spacing: tight): var(--spacing-function(0.5));
    else: var(--spacing-function(1))
  );
}

Browser Support

As of August 2025:

✅ Chrome/Edge: supported from version 137

✅ Chrome Android: supported from version 139

❌ Firefox: under development

❌ Safari: on the roadmap

❌ Opera: not yet supported

Until broader support lands, you can fall back to patterns like the following:

.button {
  padding: 1rem 2rem;
  background: #007bff;
  padding: if(
    style(--size: small): 0.5rem 1rem;
    style(--size: large): 1.5rem 3rem;
    else: 1rem 2rem
  );
  background: if(
    style(--variant: primary): #007bff;
    style(--variant: success): #28a745;
    style(--variant: danger): #dc3545;
    else: #6c757d
  );
}

Future Outlook

The CSS Working Group is already planning extensions:

Range queries: if(style(--value > 100): ...) Logical operators: if(style(--a: true) and style(--b: false): ...) Container query integration for richer context awareness

What do you think of the CSS if() function? Have you tried it in a project? Share your thoughts in the comments.