Una Kravets

Published: July 1, 2025

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

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.

Demo: Inline support queries

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.

Demo: Visualizing UI state

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.

What's next

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:

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-01 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-01 UTC."],[],[]]