CSS Conditionals With the New If() Function ![rw-book-cover](https://developer.chrome.com/static/blog/if-article/image/if-thumb.png) ## Metadata - Author: [[Una Kravets]] - Full Title: CSS Conditionals With the New If() Function - Category: #articles - Document Note: --- tags: [#css, #css-conditionals, #webdev] - #css - #css-conditionals - #webdev Author: Una Kravets Source: Chrome Developers Blog Reference: https://developer.chrome.com/blog/if-article date created: 2025-07-11 08:50 --- # Title: CSS conditionals with the new if() function ## Table of Contents: - [📝 Summary](#📝-summary) - [📖 Main Content](#📖-main-content) - [🗒️ Notes](#🗒️-notes) - [📖 References](#📖-references) - [🗣️ Paraphrase](#🗣️-paraphrase) - [📰 Newsletter](#📰-newsletter) - [✅ Action Items](#✅-action-items) - [🧪 Hypotheses](#🧪-hypotheses) - [📊 Methodology](#📊-methodology) - [❓ Questions](#❓-questions) - [🔮 Future Research](#🔮-future-research) - [💡 Implications](#💡-implications) - [🧠 Learning Styles Assessment](#🧠-learning-styles-assessment) - [📊 Accessibility Assessment](#📊-accessibility-assessment) - [🌍 DEIB Assessment](#🌍-deib-assessment) - [✅ Logical validity](#✅-logical-validity) - [🔍 DARVO Analysis](#🔍-darvo-analysis) - [🔍 SEO Evaluation](#🔍-seo-evaluation) - [🎯 Conclusion](#🎯-conclusion) ## 📝 Summary: The article introduces the new CSS `if()` function available in Chrome 137, which allows inline conditional styling using `style()`, `media()`, and `supports()` queries. It explains the basic syntax of `if(condition: value; …; else: fallback)` and highlights how `if()` applies queries directly to the styled element without needing parent selectors. Through three demos—inline media queries, support queries, and UI state visualization—the post showcases practical applications and previews future enhancements like range querying and custom functions. ## 📖 Main Content: The article begins by outlining the syntax and purpose of the `if()` function, designed to streamline conditional logic within CSS properties. Instead of scattering media or feature queries across separate rules, developers can now embed logic inline, reducing duplication and improving readability. Next, three demonstrations illustrate real-world use cases: 1. **Inline media queries** adjust button sizes based on pointer type, ensuring touch targets meet accessibility guidelines. 2. **Inline support queries** switch colors or pseudo-content messages based on color-space support, such as OKLCH. 3. **UI state visualization** styles components like cards by reading data attributes or custom properties directly. Each demo links to a live CodePen for hands-on experimentation. Finally, the author speculates on future CSS capabilities, mentioning potential range queries and integration with upcoming `@function` proposals. ### 🗒️ Notes - **Syntax Overview** - `if(condition-1: value-1; …; else: value-fallback)` - Supports `style()`, `media()`, `supports()` queries - Applies to the element immediately, no parent selector needed - **Demo #1: Inline Media Queries** - Example: `width: if(media(any-pointer: fine): 30px; else: 44px);` - Mirrors traditional `@media` but inline for brevity - **Demo #2: Inline Support Queries** - Example: `background-color: if(supports(color: oklch(...)): oklch(...); else: #00adf3);` - Provides feature detection within property values - **Demo #3: UI State Visualization** - Reads `data-status` via `style(--status: …)` - Conditionally sets `border-color` and `background-color` - **Future Directions** - Range querying possibilities (`if()` with numeric ranges) - Integration with custom functions (`@function` spec) - **Licenses & Links** - Licensed CC BY 4.0; code under Apache 2.0 - Live demos on CodePen ## 📖 References: - Una Kravets. “CSS conditionals with the new if() function.” Chrome Developers Blog. - MDN Web Docs. “CSS conditional rules.” ## 🗣️ Paraphrase: 1. **Original**: “From Chrome 137 you can try out CSS inline conditionals with the `if()` function. `if()` enables a cleaner developer interface for dynamic styles like style queries and media queries, with some key differences…” **Paraphrase**: Starting in Chrome 137, developers can leverage the new `if()` function to embed conditional logic directly within CSS properties. This approach simplifies writing dynamic styles—such as media or feature-based queries—and differs in that all logic lives alongside the property it affects. 2. **Original**: “The addition of `if()` provides a new architectural opportunity for CSS developers. As technologies like style queries evolve, range querying will likely be possible within `if()` functions, and they will also be useful when combined with the upcoming custom functions proposal…” **Paraphrase**: Introducing `if()` opens up fresh design patterns in CSS architecture. Looking ahead, we can expect `if()` to support range-based conditions and to integrate seamlessly with forthcoming proposals for user-defined CSS functions, further enhancing its flexibility. ## 📰 Newsletter: 🚀 **This Week in WordPress & WebDev** Hey there, WP community! Ready to level up your CSS game? Una Kravets just dropped a post on Chrome’s new `if()` function—CSS’s own inline conditional operator. Learn how to embed media, feature, and style queries right next to your properties, declutter your stylesheets, and improve maintainability. Plus, dive into live demos on CodePen for pointer-based button sizing, OKLCH color support checks, and data-attribute-driven UI states. Don’t miss Lea Verou’s deep dive or the 3-minute walkthrough link below. Try it in Chrome 137 and let us know how it integrates with your favorite WP themes or page builders! - 👉 Read more: https://developer.chrome.com/blog/if-article - 🎨 Demo: https://codepen.io/web-dot-dev/pen/if-media - 🔗 Community chat: #css-if-function on Slack ## ✅ Action Items: 🛠 **Prompt**: > “Analyze the ‘CSS conditionals with the new if() function’ article and outline how its concepts can be integrated into WordPress theme development, used to educate open-source contributors, aligned with GoDaddy’s OSPO initiatives, and support sustainable funding for CSS-focused OSS projects.” ## 🧪 Hypotheses: 1. **H1**: Embedding conditional logic via `if()` reduces stylesheet size and duplication compared to separate `@media` or `@supports` rules. 2. **H2**: Using inline `if()` queries improves perceived page performance by cutting down render-blocking CSS. 3. **H3**: Educating developers on `if()` increases contributions to CSSWG proposals and Chrome’s Origin Trials. ### 📊 Methodology: - **Data Sources**: Analyze open-source CSS codebases, gather metrics on stylesheet size and specificity. - **Design**: Conduct A/B tests comparing `if()` vs. traditional queries in controlled environments. - **Analysis**: Use statistical tests on performance metrics, code complexity, and developer survey feedback. ### ❓ Questions: - How might `if()` affect the adoption of CSS-in-JS libraries? - What are the compatibility barriers for `if()` outside Chrome? - Can inline conditionals combine with preprocessors like SASS? ### 🔮 Future Research: - Investigate range querying within `if()` for responsive typography. - Study integration of `if()` with `@function` for custom CSS logic. - Evaluate community uptake across major frameworks (Tailwind, Bootstrap). ### 💡 Implications: Adopting `if()` could streamline component styling, reduce reliance on heavy frameworks, and inspire new contributions to CSS standards. It may also influence OSPO strategies by demonstrating how rapid innovation in open specs drives ecosystem growth. ### 🧠 Learning Styles Assessment: - **Visual Learners** - **Present**: Code snippets act as mini-diagrams but no standalone visuals. - **Improve**: Add flowcharts illustrating conditional logic paths. - **Aural Learners** - **Present**: No audio content. - **Improve**: Embed an audio summary or link to a podcast episode. - **Verbal Learners** - **Present**: Clear examples with explanations. - **Improve**: Include analogies comparing `if()` to JavaScript’s `if…else`. - **Physical Learners** - **Present**: Interactive CodePen demos. - **Improve**: Provide downloadable sandbox environments for live coding - Summary: Learn about the new CSS if function, which enables a cleaner developer interface for dynamic styles like style queries and media queries. - URL: https://developer.chrome.com/blog/if-article From Chrome 137 you can try out CSS inline conditionals with the `if()` function. `if()` enables a cleaner developer interface for dynamic styles like style queries and media queries, with some key differences, which you can learn about in this post. The CSS `if()` function works using a series of condition-value pairs, structured as follows: ``` property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3); ``` You can provide an `else` statement, which is used if none of the other conditions are satisfied: ``` property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4); ``` At this time, `if()` works with three different types of queries: * `style()`: Style queries * `media()`: Media queries * `supports()`: Supports queries **Note:** A key difference between style queries and using `style()` within the `if()` function is that `if()` applies to the styled element immediately. As it doesn't rely on a parent element to query a value, you can query style values immediately. Let us put this into context with some examples: Using `if()` is a great way to include inline media queries in your styles. For example, you could check for a user's theming preference (light or dark), or do inline media queries for the viewport width. The following example shows the media query for pointer devices. The default size of the button would be 30px on a device with a fine pointer, like a mouse, but for touchscreen devices, such as those with a coarse pointer, the size of the button would be the minimum-recommended 44px for appropriate touch spacing for easier access. ``` button { aspect-ratio: 1; width: if(media(any-pointer: fine): 30px; else: 44px); } ``` The preceding code is gives the same result as the following media query: ``` button { aspect-ratio: 1; width: 44px; } @media (any-pointer: fine) { button { width: 30px; } } ``` Using the `if()` format lets you have the logic inline, without requiring the styling logic in two different places. Demo where using `if()` increases font-size of the button on devices with course pointers. Another way to use `if()` is to create inline support queries. For example, to check for wide-gamut color support, like OKLCH, you could use: ``` body { background-color: if( supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232); else: #00adf3; ); &::after { content: if( supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH"; else: "Your browser does not support OKLCH"; ); } } ``` With this code, if the browser supports the `oklch` color space, the user will see the more vivid color, and will also get the message: "Your browser supports OKLCH" in `::after` pseudo content. A support query using the `if()` function. To learn more and see the difference between rgb and more advanced color spaces, check out the color picker and resources at [oklch.com](https://oklch.com/#0.7,0.185,232,100). **Note:** For support queries like this to work, there would first need to be support for `if()` as well, so this technique would pertain to future-facing features that land after `if()` does. You can also use `if()` for state-based styling. For example, styling progress cards based on their UI state (pending or complete). Store the status in a data attribute or a custom property directly, and then apply styles inline to the property, using `if()`. ``` <div class="card" data-status="complete"> ... </div> ``` ``` .card { --status: attr(data-status type(<custom-ident>)); border-color: if( style(--status: pending): royalblue; style(--status: complete): seagreen; else: gray); background-color: if( style(--status: pending): #eff7fa; style(--status: complete): #f6fff6; else: #f7f7f7); } ``` Styling stateful labels inline to the property using the `if()` function. With `style()` inside of an `if()` function, you can directly style the element you are targeting, no need for a parent element like CSS style queries would require. This demo shows a basic case of how you can use `if()` to support a new architectural approach to CSS. One benefit of using CSS custom properties over classes is the ease of updating them in CSS. For example, they could be updated using media queries or pseudo states such as `:hover`. The addition of `if()` provides a new architectural opportunity for CSS developers. As technologies like style queries evolve, range querying will likely be possible within `if()` functions, and they will also be useful when combined with the upcoming custom functions proposal (CSS `@function`). To learn more about these features, check out:, CSS Conditionals With the New If() Function, Una Kravets, 01jzwrsqnmbgfdpy2244tejar5.