 Una Kravets [X](https://twitter.com/una) [Mastodon](https://front-end.social/@una) [Homepage](https://una.im)
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
> [!NOTE]
> **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:
## Demo: Inline media queries
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](https://oklch.com/#0.7,0.185,232,100).
> [!NOTE]
> **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.
## 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()`.
...
.card {
--status: attr(data-status type());
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:
- [3-minute video walkthrough of Demo #3](https://www.youtube.com/watch?v=Apn8ucs7AL0)
- [Article from Lea Verou](https://lea.verou.me/blog/2024/css-conditionals/)