Powerful inline conditional logic comes to stylesheets for the first time. Here's how it works and what it means for developers.

The New Stack is a publication covering trends and technologies in cloud-native development, DevOps, and software delivery. Developers can learn about containerization, Kubernetes, and cloud computing, as well as explore topics such as microservices architecture, serverless computing, and continuous integration/continuous delivery (CI/CD) pipelines.

The New Stack

CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different property values based on conditional tests using style queries, media queries, or feature queries. The syntax follows JavaScript's if-else pattern and can be used for tasks like theme switching, responsive design, and feature detection. Currently, Chrome and Edge support the function, while Safari and Firefox are still implementing it. This marks the first time CSS offers inline logic processing without requiring separate code blocks.

CSS Finally Gets Inline Conditional Logic With New if() Function

This is wild css is becoming a ‘real’ programming languages! 🤨☺️

Can’t wait to wait several years for most browsers to support it

Why? Aren’t the selectors enough?

Yet we wont be able to use it due to browser support 😭😡

This is misleading, yes <code>if( )</code> is in draft but no where near “CSS now supports”.