#blog
Начиная с Chrome 137, доступна новая CSS-функция if(), которая позволяет задавать стили в зависимости от условий. Пока только в chromuim-семействе, но держим кулачки за расширение до baseline. Функция поддерживает три типа проверок:
- style() — запросы стиля
- media() — медиа-запросы
- supports() — проверка поддержки возможностей браузера

Синтаксис:

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

Примеры:
1. Медиа-запросы inline:

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

Размер кнопки меняется в зависимости от типа указателя.

2. Проверка поддержки цвета OKLCH:

background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3
);

Если браузер поддерживает OKLCH, будет использован более яркий цвет.

3. Стилизация по состоянию элемента:

.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
}

Различные стили в зависимости от значения атрибута data-status.

В статье есть более развернутые примеры и сценарии использования.

Chrome Blog - https://developer.chrome.com/blog/if-article?hl=en
MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/if