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
Specifications
Usage (according to Chrome Platform Status)
~0.192% of page loads. More data at chromestatus.com.Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper 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]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist