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

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

MDN documentation

Usage (according to Chrome Platform Status)

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

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]