Add feature: CssIf

[andruud]

Specification

https://drafts.csswg.org/css-values-5/#if-notation

Description

The if() CSS function allows "conditional value selection" inline in values, e.g.:

height: if(media(width > 1000px): 500px; else: 300px)

Documentation

https://lea.verou.me/blog/2024/css-conditionals/

https://www.bram.us/2025/02/18/css-at-function-and-css-if/ (combined with #2786).

Browser support

Chrome is planning to ship in M136 (https://chromiumdash.appspot.com/schedule).

[schalkneethling]

@andruud @captainbrosset Seems like it might be too early for this one? I did a search against CanIUse and MDN, and it seems there is another just yet, but perhaps my search skills are just not strong enough. 😁 Let me know. Thanks!

• https://github.com/mdn/content/issues?q=is%3Aissue%20state%3Aopen%20Conditional%20Value%20Selection
• https://github.com/mdn/content/issues?q=is%3Aissue%20state%3Aopen%20if()%20
• https://caniuse.com/?search=if()
• https://developer.mozilla.org/en-US/search?q=if%28%29

[captainbrosset]

@schalkneethling I trust your search skills! Yes, this feature is very early in the making which, for resources like MDN and CanIUse, basically means it doesn't exist at all.

But for web-features, things a little different. One of the goals of the project is to act as a reference data set which uniquely identifies features from the day they're born, so that a bunch of other sources of data around the web ecosystem can start referring to that feature, through this unique ID. We're working on processes and tooling to help handle changes to early features too, so that even if the feature name, description, scope changes over time, our project can handle it.

So, it's fine to create a yml file in the repo for very early features, even if that means it will appear as not supported anywhere for a while. Later, once MDN (or, rather BCD) starts having compat data about it, we can add the data to the yml file.

Here are examples of early features:

• https://github.com/web-platform-dx/web-features/blob/main/features/column-pseudo.yml
• https://github.com/web-platform-dx/web-features/blob/main/features/contrast-color.yml
• https://github.com/web-platform-dx/web-features/blob/main/features/function.yml
• https://github.com/web-platform-dx/web-features/blob/main/features/image-function.yml

[schalkneethling]

@captainbrosset Two things:

Not directly related to the work that needs to be done here, but tangentially related:

1. Would we refer to this as CSSif, conditional value selection, if-notation - I ask because searching for this on BCD, CanIUse, and MDN is tricky at the moment 😁
2. Would BCD get a new subcategory (folder) inside https://github.com/mdn/browser-compat-data/tree/main/css called functions? I am unsure where this would fit under the current subcategories (same goes for function)

Thanks!

Some more questions:

The draft folder in features is a little confusing. There is, for example, contrast-color (features/contrast-color.yml), but it is still in draft mode (https://drafts.csswg.org/css-color-6/#funcdef-contrast-color) and not in any browsers.

The README inside draft states:

• Features where the specification is not yet complete.
• Features that have not yet shipped in any browser.