Chrome Introduces CSS If Function, Enabling Conditional Styling Natively in CSS

Write for InfoQ

Chrome has introduced support for the new CSS if function, bringing conditional logic directly to native stylesheets for the first time with the release of Chrome 137. The feature enables developers to write declarative conditional styles directly in property values, reducing the need for pre-processors or JavaScript-based fallbacks.

The if() function is part of the evolving and draft CSS Values and Units Module Level 5 specification and is currently exclusive to Chrome 137 and newer. It supports condition-value evaluation using three inline condition types: style(), media(), and supports(). It offers a flexible and powerful way to dynamically apply styles based on custom properties, media queries, or feature support.

Developers familiar with Sass or PostCSS may find the function especially useful, as it brings similar logic into native CSS. Some developers see this as a step toward eliminating the need for preprocessors like Sass.

One of the headline features in this release is the ability to use the if() function for real-time conditional styling without leaving the CSS file. The syntax allows developers to pass a condition followed by a value, and optionally an else clause.

By pairing a custom property with a data-status attribute on an HTML element, the example below shows how if() can assign different background colours to panels based on the attribute’s value:

.panel {
 --status: attr(data-status type(<custom-ident>));
 background-color: if(
  style(--status: proposed): blue;
  style(--status: assigned): pink;
  style(--status: progress): orange;
  style(--status: complete): green;
  else: gray
 );
}

This release has sparked mixed reactions across the developer community. Some commenters have criticised the syntax, calling it messy. One developer compared it to a ternary operator:

I really don't like the syntax of it. It's basically a ternary with everything inside of the if() instead of the usual if (condition).

Like any new CSS feature, there are caveats. At the time of writing, the if() function is only supported in Chrome 137+, with limited alignment with Firefox or Safari. As such, developers are advised to use caution and provide fallbacks to ensure compatibility. The community are worried about the compatibility and the lack of a unified standard, likening the approach Chrome are taking to an old Microsoft strategy called Embrace, extend and extinguish , where for Internet Explorer they would make up their own standards'.

Others have been more positive about the change. In a recent video, Theo Browne explored the new feature and highlighted its advantages for large-scale style systems, where using traditional methods, a misplaced or incorrectly ordered pseudo-class can break the UI. With if(), this risk is reduced because the conditional logic is self-contained within the style declaration, and once a condition is met, the browser applies the matching value and ignores the rest. Browne concluded by saying he’s not only excited about the feature, but that 'the future of CSS has never felt brighter.'

Chrome 137 is available in the stable channel as of May 2025. Developers can begin using if() today in supported environments, and track the specification’s progress via the CSS Values and Units Module Level 5 on W3C.

Related Topics:

• Development
• Web Development
• Web Browser
• HTML
• CSS
• Chrome

We protect your privacy.