unknown

CSS now supports conditional logic with the new if() function, officially shipped in Chrome 137. This feature enables developers to set CSS properties based on conditions without JavaScript or preprocessors. The function supports three main capabilities: style queries for reacting to CSS custom properties, inline media queries for responsive design, and feature detection with supports(). Real-world applications include simplified dark mode implementation, design system components, and responsive containers. Browser support is currently limited to Chrome/Edge 137+ with Firefox in development and Safari on the roadmap.

The CSS if() Function Has Arrived!

Frontend Tribe focuses on sharing articles and tips about JavaScript, TypeScript, Reac.js, /Next.js, Web Components, CSS, and front-end development in general. Join us to explore, learn, and grow together in the world of web development!

Front-end Tribe

<p><code>if</code> has arrived last year</p>
