CSS Variables Are Here!

By Matt Cotter · 6/28/2025

It’s Finally Here

Front-end developers, rejoice: conditional logic has officially arrived in CSS! With the release of Chrome 137, we now have native support for the long-awaited if() function in CSS. No JavaScript, no class juggling, just pure style logic.

In this post, I’ll break down what if() does, how to use it, and why this new feature is a huge deal for modern web design.

What Is the `If()` Function?

Think of if() like a ternary operator for CSS values. It lets you conditionally apply styles based on custom properties (style()), media queries (media()), or feature support (supports()).

Here’s a basic example:

padding: if(
  style(--theme: dark): 2rem;
  else: 3rem
);

The way this breaks down is that if the --theme variable is set to dark, the padding applied is 2rem, otherwise it’s 3rem.

Use Cases You’ll Love

This opens up tons of new possibilities without relying on utility classes or bloated JavaScript conditionals.

Responsive Design Without Media Queries

You can directly use media() conditions in your CSS logic:

font-size: if(
  media(width > 600px): 1.5rem;
  else: 1rem
);

Now, instead of rewriting selectors inside media query blocks, you can inline conditional values directly.

Feature Detection Without @supports

backdrop-filter: if(
  supports(backdrop-filter: blur(10px)): blur(10px);
  else: none
);

This means better progressive enhancement and cleaner fallbacks.

Theming and Design Tokens

color: if(
  style(--theme: dark): white;
  else: black
);

Finally, a way to build more dynamic themes directly into your CSS, without extra JavaScript or switching classes on the body.

Browser Support

As of now, if() is supported in Chrome 137. Widespread adoption will take a little time, but this is a sign of where CSS is heading: more logic, more control, and fewer workarounds.

You can always feature-detect support using good old @supports to prevent issues for users on older browsers.

@supports (padding: if(style(--test): 1px; else: 2px)) {
  /* safe to use the new stuff here */
}

Why This Is a Big Deal

The addition of if() makes CSS dramatically more expressive. We’ve long wanted logic in our stylesheets without relying on preprocessors like Sass or messy class toggles in JavaScript. Now it’s possible, natively.

It won’t replace every utility framework or eliminate all conditionals in your JS, but it brings us a step closer to styling that’s both smart and maintainable.

Final Thoughts

This is the most exciting CSS update in years. Whether you’re building a design system, experimenting with dark mode, or simply tired of writing @media queries for every layout tweak, if() offers a cleaner, more powerful way forward.

Keep an eye on browser adoption, and start experimenting today. You might find yourself writing CSS in ways you never thought possible.