After years of developer frustration and questions on online forums, it’s finally happening: CSS is getting an if() function to apply styling when a condition is met. For the first time, developers can make logical decisions directly in stylesheets, without separate code blocks. This opens up whole new possibilities for web designers.
CSS is a mature styling language that determines how web pages look. It determines which colors are used and how wide a block, table, or image is or may be. Because CSS has been around for many years and has already undergone rapid development, updates are no longer released very often. Once a year, the W3C publishes an update with the latest developments. The 2025 edition was published last month. It is now up to the software developers behind the popular browsers to implement these updates.
Long-awaited if functionality now available
For years, developers and designers have been asking on online forums whether CSS supports if() and else() statements. Although workarounds were available, they did not work well. That is now changing with the latest update, because the W3C has finally added the if() and else() functions to the CSS standard.
The function builds on previous work that enabled developers to define variables.
How does the if() function work?
The if() function is based on the JavaScript if…else function. Developers can compare an if statement to a variable value. The function accepts an ordered list of statements, each consisting of a condition or variables and a value, separated by a colon.
The condition can be based on a style query, media query, or feature query. The syntax consists of an if test or the else keyword, followed by the desired values.
Some examples:
//single if background color page
body {
background-color: if(style(--scheme: dark): #eeeeee;)}
//alignment of website content
div#content {
margin: if(media(width > 700px): 0 auto;)}
//multiple ifs to set background
div {
background: if(
style(--scheme: ice): linear-gradient(#caf0f8, white, #caf0f8);
style(--scheme: fire): linear-gradient(#ffc971, white, #ffc971);
else: none;
);
}The if can therefore be applied in many ways in a stylesheet, which offers a whole host of new possibilities. However, we will have to be patient for a while longer.
Browser support still limited
The if() function is currently only supported by Chromium and all browsers based on it. The most important ones are Chrome and Edge. Support in Safari and Firefox is still under development, and it is unclear how long that will take. Support on smartphones is also limited; only Chrome for Android offers support.
This means that developers cannot yet fully utilize the if() function. Hopefully, this will change soon.
Also read: Which browser is actually the most secure?