TLDR Web Dev · ARTICLES & TUTORIALS

CSS CONDITIONALS WITH THE NEW IF() FUNCTION

developer.chrome.com5 min read

Summary from the TLDR Web Dev newsletter

The new CSS `if()` function can be used to write inline conditional styles instead of separate media queries or style blocks. The function supports three types of queries (style, media, and supports) and uses a condition-value pair syntax like `property: if(condition-1: value-1; condition-2: value-2; else: fallback-value)`. This allows for cleaner, more maintainable code by keeping conditional logic inline with the property rather than scattered across multiple CSS blocks.