CSS Gets Inline Conditional Logic with New If() Function

Inline conditional processing is coming to CSS.

Those who have felt boxed in by the web’s universal style sheets’ declarative nature are about to enjoy a bit more freedom to mix it up a bit.

For years, devs and designers have asked in Stack Overflow and elsewhere if CSS had any conditional logic, finding only workarounds as a possibility. Now, the technical committee behind the style standard has ratified a new function for the style sheet, if(), which opens up a whole new world of choice for designers.

“This is the first time, that I’m aware of, that you can do this logic inline and not have a dedicated code block on the bottom of your file,” said Mark Adkins, a principal user experience designer at financial firm Fidelity Investments, in a talk about some of the latest developments with CSS at the AllThingsOpen 2025 conference in Raleigh, N.C. earlier this week.

Managed by the World Wide Web Consortium (W3C), CSS is the standardized way of specifying the presentation, styling and layout of web pages, working alongside HTML for the layout of the pages and JavaScript for their logic.

CSS is a mature technology, so it doesn’t get updated as much as it used to. Once a year, W3C issues a snapshot that aggregates all the latest developments across different parts of the specification (2025’s edition was posted last month). It is then up to the browser makers to see these specs get implemented, the progress of which has been dutifully tracked by the Can I use site.

What Is the CSS if() Function?

The new function, arriving in the 2025 snapshot, is unprecedented for CSS.

“This one really caught me off guard,” admitted Adkins to the audience.

While most of CSS is about the shading and coloring and various other details of presentation, the spec has not offered much in the way of logic processing.

If() builds from previous work to allow developers to specify variables, or “custom properties,” Adkins said. The properties, defined in the browser’s Document Object Model (DOM), can then be changed with JavaScript.

The new functionality extends logic properties into the inline code itself.

In the world of programming, the if() function itself is nothing new — most imperative languages have a version of the function. The if() function is based on the JavaScript if … else function, and provides a way for the programmer to set different values of a property depending on the result of a conditional test. If a then x, if b then y, and so on.

You can also supply an else statement if none of the conditionals are met.

In the case of CSS, the test can be based on a style query, a media query or a feature query.

How the if() Function Works in CSS

According to the specification, the statement consists of an ordered semi-colon-separated list of statements, each specifying a condition and a value, separated by a colon.

The function’s syntax, as purloined Mozilla Development Network docs, can be seen here:

MDN also provides an example of how if() could be used: Below, you will find that one of two background images can be deployed on a web page depending on which theme is chosen (“ice” or “fire”):

The function can be built into any property of a class, or as part of a selector, Adkins said.

Current Browser Adoption and Support

Currently, the if() function is only partially supported across browsers.

Chrome and Edge support the function, while Safari and Firefox still lag behind. Mobile development lags even further, with only Chrome for Android and the Android browsers recognizing the statement.

New Possibilities With CSS Conditionals

“The addition of if() provides a new architectural opportunity for CSS developers,” wrote Google Web UI DevRel Lead Una Kravets in a blog post describing the ways the new conditional could be used.

The function could be used to create inline media queries, Kravets suggested. As an example, a website could change designs based on the user’s preference for light or dark mode. It could also be used to do inline support queries, checking to see if the hardware supports the design, and switching to an alternative design if not. It could be a handy way to visualize the state of a running process, with different images designating whether the job is finished or not.