if in CSS

The if() function is starting to become more usable as of early 2026.

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

It works with three different types of queries: style, media, and supports. [[20220628021734-style-queries]] [[20230526103309-css-supports]]

This lets you convert some CSS that's based on 'overwriting', with an inline if statement, which may be easier to read.

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

becomes

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

You can use this for more complex property styling too, like the below example

.card {
  --status: attr(data-status type(<custom-ident>));
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

https://developer.chrome.com/blog/if-article

[[css]]