--- title: CSS Finally Gets Inline Conditional Logic With New if()... description: CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different... canonical: https://daily.dev/posts/css-finally-gets-inline-conditional-logic-with-new-if-function-manljf5cs twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Finally Gets Inline Conditional Logic With New if() Function | daily.dev og:description: CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different... og:url: https://daily.dev/posts/css-finally-gets-inline-conditional-logic-with-new-if-function-manljf5cs og:image: https://api.daily.dev/og/posts/manLJf5CS.png og:image:alt: CSS Finally Gets Inline Conditional Logic With New if() Function 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. # CSS Finally Gets Inline Conditional Logic With New if() Function **[The New Stack](https://daily.dev/sources/newstack)** · 5 min read · 392 upvotes · 40 comments ## Summary CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different property values based on conditional tests using style queries, media queries, or feature queries. The syntax follows JavaScript's if-else pattern and can be used for tasks like theme switching, responsive design, and feature detection. Currently, Chrome and Edge support the function, while Safari and Firefox are still implementing it. This marks the first time CSS offers inline logic processing without requiring separate code blocks. ## 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. **@byteoutlaw** · 39 upvotes > This is wild css is becoming a 'real' programming languages! 🤨☺️ **@zytronium** · 25 upvotes > Can't wait to wait several years for most browsers to support it **@ivanvlahov** · 8 upvotes > Why? Aren't the selectors enough? **@laurengwyn** · 4 upvotes > Yet we wont be able to use it due to browser support 😭😡 **@martinsonuoha** · 3 upvotes > This is misleading, yes `if( )` is in draft but no where near "CSS now supports". --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend), [#html](https://daily.dev/tags/html) [View this post on daily.dev](https://daily.dev/posts/css-finally-gets-inline-conditional-logic-with-new-if-function-manljf5cs) ```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":"TechArticle","headline":"CSS Finally Gets Inline Conditional Logic With New if() Function","url":"https://daily.dev/posts/css-finally-gets-inline-conditional-logic-with-new-if-function-manljf5cs","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-finally-gets-inline-conditional-logic-with-new-if-function-manljf5cs"},"datePublished":"2025-10-17T15:04:28.001Z","dateModified":"2025-10-17T15:04:51.895Z","description":"CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/acd2c5fdea99b65be8b834ab02ad71e4?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/acd2c5fdea99b65be8b834ab02ad71e4?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"The New Stack","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"The New Stack","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/newstack","url":"https://daily.dev/sources/newstack"},"commentCount":40,"discussionUrl":"https://daily.dev/posts/css-finally-gets-inline-conditional-logic-with-new-if-function-manljf5cs","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":392},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":40}],"keywords":"webdev,javascript,css,frontend,html","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"The New Stack","item":"https://daily.dev/sources/newstack"},{"@type":"ListItem","position":3,"name":"CSS Finally Gets Inline Conditional Logic With New if() Function"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-finally-gets-inline-conditional-logic-with-new-if-function-manljf5cs","comment":[{"@type":"Comment","text":"This is wild css is becoming a ‘real’ programming languages! 🤨☺️","datePublished":"2025-10-19T10:53:19.907Z","url":"https://daily.dev/posts/manLJf5CS#c-il7co6paS","author":{"@type":"Person","name":"Jacob B. Bonde","url":"https://daily.dev/byteoutlaw","image":"https://media.daily.dev/image/upload/s--veTChHK7--/f_auto/v1733220070/avatars/avatar_5cQvIZKr5tDFDotVDjulg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":39}},{"@type":"Comment","text":"Can’t wait to wait several years for most browsers to support it","datePublished":"2025-10-25T23:45:04.998Z","url":"https://daily.dev/posts/manLJf5CS#c-6LQvszXkT","author":{"@type":"Person","name":"Zytronium","url":"https://daily.dev/zytronium","image":"https://media.daily.dev/image/upload/s--OCSw81aV--/f_auto/v1759010479/avatars/avatar_v1Q0OnZE9WmiRL5F2e1OA?_a=BAMAK+ZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":25}},{"@type":"Comment","text":"Why? Aren’t the selectors enough?","datePublished":"2025-10-24T14:03:21.506Z","url":"https://daily.dev/posts/manLJf5CS#c-X3aAwEHHT","author":{"@type":"Person","name":"Ivan Vlahov","url":"https://daily.dev/ivanvlahov","image":"https://lh3.googleusercontent.com/a/ACg8ocIKCwI4hDmN3wF5YihL50EgstByGk65IFRYm0eONDXiYps8td50=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8}},{"@type":"Comment","text":"Yet we wont be able to use it due to browser support 😭😡","datePublished":"2025-10-27T00:05:30.619Z","url":"https://daily.dev/posts/manLJf5CS#c-j6FXkYGdz","author":{"@type":"Person","name":"Lauren Gwyn","url":"https://daily.dev/laurengwyn","image":"https://lh3.googleusercontent.com/a/ACg8ocK9-AzmqueUQq1VeF6XA05GhyM0pZxBv8yMbjnU8VUr-f0kRU5Atg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"This is misleading, yes if( ) is in draft but no where near “CSS now supports”.","datePublished":"2025-11-03T14:01:51.054Z","url":"https://daily.dev/posts/manLJf5CS#c-8YikSjUdc","author":{"@type":"Person","name":"Martins Onuoha","url":"https://daily.dev/martinsonuoha","image":"https://avatars3.githubusercontent.com/u/29035007?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}]} ```