Web features explorer

if()

Limited availability

The if() CSS function is an inline conditional value that returns a value based on a set of conditions.

Browser support

  • Chrome 137 Released on 2025-05-27
  • Chrome Android 137 Released on 2025-05-27
  • Edge 137 Released on 2025-05-29
  • Firefox Not supported Position Bugs: 1981485
  • Firefox for Android Not supported Position Bugs: 1981485
  • Safari Not supported Position Bugs: 296995
  • Safari on iOS Not supported Position Bugs: 296995
👍
95

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

Specifications

Usage (according to Chrome Platform Status)

~0.141% of page loads. More data at chromestatus.com.

Web Platform Tests (WPT)

View the latest WPT test results for this feature

Surveys

Developer use cases

  • make elements dependable (if x happens, let y) etc. I want to be able to not use javascript as some websites dont allow it. i use firefox. make elements dependable (if x happens, let y) etc. I want to be able to not use javascript as some websites dont allow it. i use firefox. [see original comment]
  • Make some colors change depending on a flag. The flag can be set in several different ways, so I need to make it a custom property. Make some colors change depending on a flag. The flag can be set in several different ways, so I need to make it a custom property. [see original comment]
  • I have some places where typography scales based on the selected size of the image next to it. I know the size of the image as a variable already, I'd love to be able to set weight, letter-spacing, etc. based on the image size. I have some places where typography scales based on the selected size of the image next to it. I know the size of the image as a variable already, I'd love to be able to set weight, letter-spacing, etc. based on the image size. [see original comment]
  • Modulate component styling according to app color scheme. (There are four schemes available, not two, so `light-dark()` cannot apply :3) ```css background: if( style(--current-color-scheme: dark) or style(--current-color-scheme: evil): <color-a>; else: <color-a>; ); ``` Modulate component styling according to app color scheme. (There are four schemes available, not two, so `light-dark()` cannot apply :3) ```css background: if( style(--current-color-scheme: dark) or style(--current-color-scheme: evil): <color-a>; else: <color-a>; ); ``` [see original comment]

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist