--- title: The CSS if() Function Has Arrived! | daily.dev description: 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... canonical: https://daily.dev/posts/ko2un0u6a twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The CSS if() Function Has Arrived! | daily.dev og:description: 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... og:url: https://daily.dev/posts/ko2un0u6a og:image: https://api.daily.dev/og/posts/ko2un0U6a.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The CSS if() Function Has Arrived! **[WebCraft](https://daily.dev/sources/webcraft)** · [@mouad_dadda](https://daily.dev/mouad_dadda) · 356 upvotes · 19 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@fabianletsch** · 32 upvotes > Thanks, i hate and love this at the same time 😅 **@sotiredofmakingaccounts** · 5 upvotes > complete waste of everyone's time to say that it has arrived when it is NOT usable yet https://caniuse.com/css-if **@varactor** · 3 upvotes > Well, why not.. however I'm wondering that after all these years such a basic thing wasn't included before. If we did not needed it in 24 years, what changed now that we need an if in CSS? The only thing I see great benefit in this is in embedded systems (like web pages stores in microchips) where you can't have the luxury of a framework, js or anything "fancy" **@haraldmoonshot** · 1 upvotes > I’ve implemented a small time travel theme demo with this new function. Obviously, you need Chrome to see it in full action. Check it out here: [Codepen.io](https://codepen.io/diractions/pen/dPMVyQx) **@mathewmarco** · 1 upvotes > my first thoughts where WHAT DO YOU MEAN LOGIC IN CSS after reading it i was like WHY DIDN'T THEY DO THIS A LONG TIME AGO ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend), [#ui-design](https://daily.dev/tags/ui-design), [#google-chrome](https://daily.dev/tags/google-chrome) [View this post on daily.dev](https://daily.dev/posts/ko2un0u6a) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/ko2un0u6a","headline":"The CSS if() Function Has Arrived!","text":"Shared: The CSS if() Function Has Arrived!","url":"https://daily.dev/posts/ko2un0u6a","datePublished":"2025-09-26T10:12:06.290Z","dateModified":"2025-09-26T10:12:43.643Z","author":{"@type":"Person","name":"Mouad Dadda","url":"https://daily.dev/mouad_dadda","image":"https://media.daily.dev/image/upload/s--qvecFxpC--/f_auto/v1746013117/avatars/avatar_cmPs2DO0hyj5zVizDLJDZ","description":"🚀 Full Stack Developer💡 Passionate about contributing to open-source projects .","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":22730}},"image":"https://media.daily.dev/image/upload/s--1KxV4ohY--/f_auto/v1722860400/public/Placeholder%2007","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":356},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":19}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/b6XgMhJwG"},"comment":[{"@type":"Comment","text":"Thanks, i hate and love this at the same time 😅","datePublished":"2025-09-26T13:11:14.880Z","url":"https://daily.dev/posts/ko2un0U6a#c-nRH3vwtsc","author":{"@type":"Person","name":"Fabian Letsch","url":"https://daily.dev/fabianletsch","image":"https://lh3.googleusercontent.com/a/ACg8ocKR6BVy_wn23EoOKq7-BlszlcXcLmASlnb7l-GtS-q1bePnkaJf=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":32}},{"@type":"Comment","text":"complete waste of everyone’s time to say that it has arrived when it is NOT usable yet https://caniuse.com/css-if","datePublished":"2025-10-20T20:33:15.314Z","url":"https://daily.dev/posts/ko2un0U6a#c-tR7rpHXOO","author":{"@type":"Person","name":"Daniel","url":"https://daily.dev/sotiredofmakingaccounts","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Well, why not… however I’m wondering that after all these years such a basic thing wasn’t included before. If we did not needed it in 24 years, what changed now that we need an if in CSS? The only thing I see great benefit in this is in embedded systems (like web pages stores in microchips) where you can’t have the luxury of a framework, js or anything “fancy”","datePublished":"2025-10-04T17:52:57.452Z","url":"https://daily.dev/posts/ko2un0U6a#c-coieAJQyg","author":{"@type":"Person","name":"Var Envious","url":"https://daily.dev/varactor","image":"https://lh3.googleusercontent.com/a-/AFdZucocfb6toRWCz4wvxV86aS7kYqRmP06kBlyszalaKA=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"I’ve implemented a small time travel theme demo with this new function. Obviously, you need Chrome to see it in full action. Check it out here: Codepen.io","datePublished":"2025-11-21T06:40:10.784Z","url":"https://daily.dev/posts/ko2un0U6a#c-MPgVj56iX","author":{"@type":"Person","name":"Harald","url":"https://daily.dev/haraldmoonshot","image":"https://avatars.githubusercontent.com/u/141727856?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"my first thoughts where WHAT DO YOU MEAN LOGIC IN CSS after reading it i was like WHY DIDN’T THEY DO THIS A LONG TIME AGO","datePublished":"2025-10-25T18:17:33.680Z","url":"https://daily.dev/posts/ko2un0U6a#c-nZKM1uCR5","author":{"@type":"Person","name":"Mathew Marco","url":"https://daily.dev/mathewmarco","image":"https://lh3.googleusercontent.com/a/ACg8ocIyHcpOBBaqtfF0R5JjXvbWj5tS6w2fNz4yPYli_wIWa2tdcw=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/webcraft","name":"WebCraft"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"WebCraft","item":"https://daily.dev/squads/webcraft"},{"@type":"ListItem","position":3,"name":"The CSS if() Function Has Arrived!"}]} ```