“If” CSS Gets Inline Conditionals

The CSS Working Group (CSSWG) has green-lit a proposal to add an if() conditional to CSS Values. Its design enables the application of styling based on certain conditions, a feature that current CSS users may be familiar with through existing features like :has() and Container Style Queries. When it arrives, CSS users will be able to utilise if() in conjunction with existing CSS standards to detect conditions such as @media or @supports, creating a structure to write inline conditions with selectors. The if() structure is conceptual at the moment, and its specifics are expected to change as CSSWG tests it. However, the fundamental idea of it appears to revolve around declaring a condition and a style, with two possible style outcomes, "default" and "updated".