The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value associated with the first true condition. If none of the conditions evaluate to true, the function returns an empty token stream. This allows web authors to express complex conditional logic in a simple and concise way. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div>
The CSS if() function provides a way for web authors to express complex conditional logic in a simple and concise way. The initial GitHub proposal had a positive feedback from web developers. One of the use-cases might be using "if()" in custom functions, https://drafts.csswg.org/css-mixins-1/#defining-custom-functions.
Explainers: https://docs.google.com/document/d/1mbHBUR40jUBay7QZxgbjX7qixs5UZXkdL9tVwGvbmt0/edit?usp=sharing