Условные выражения CSS с новой функцией if()

Una Kravets

Дата публикации: 1 июля 2025 г.

В Chrome 137 можно попробовать условные выражения CSS с функцией if(). if() позволяет создать более удобный интерфейс разработчика для динамических стилей, таких как запросы стилей и медиазапросы, но при этом имеет ряд ключевых отличий, о которых рассказывается в этой статье.

Функция CSS if() работает с парами "условие – значение", которые имеют следующую структуру:

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

Вы можете указать оператор else, который будет использоваться, если ни одно из других условий не выполнено:

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

В настоящее время if() работает с тремя типами запросов:

• style(): запросы о стиле
• media(): медиазапросы
• supports(): поддерживает запросы

Рассмотрим несколько примеров.

Демоверсия: встроенные запросы медиа

Использование if() – отличный способ включить медиазапросы в стили. Например, можно проверить, какую тему выбрал пользователь (светлую или темную), или выполнить встроенные запросы медиа для ширины области просмотра. В примере ниже показан запрос медиа для указывающих устройств. По умолчанию размер кнопки составляет 30 пикселей на устройстве с точным указателем, например мышью. На устройствах с сенсорным экраном, например с грубым указателем, размер кнопки будет минимально рекомендованным – 44 пикселя, чтобы обеспечить достаточное расстояние между элементами и упростить доступ.

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

Приведенный выше код дает тот же результат, что и следующий запрос медиа:

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

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

Формат if() позволяет разместить логику непосредственно в коде, а не в двух разных местах.

Демоверсия: встроенные запросы в службу поддержки

Ещё один способ использовать if() – создавать встроенные запросы в службу поддержки. Например, чтобы проверить поддержку широкой цветовой гаммы, такой как OKLCH, можно использовать следующий код:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Если браузер поддерживает цветовое пространство oklch, пользователь увидит более яркий цвет и сообщение "Ваш браузер поддерживает OKLCH" в псевдоконтенте ::after.

Чтобы узнать больше и увидеть разницу между RGB и более продвинутыми цветовыми пространствами, откройте палитру и ресурсы на сайте oklch.com.

Демонстрация визуализации состояния интерфейса

Для стилей на основе состояний также можно использовать сочетание клавиш if(). Например, можно задать стиль карточек с информацией о прогрессе в зависимости от их состояния (ожидание или завершение). Сохраните статус непосредственно в атрибуте данных или дополнительном параметре, а затем примените стили к параметру встроенным способом, используя if().

<div class="card" data-status="complete">
  ...
</div>

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

С помощью функции if() и оператора style() можно напрямую задавать стиль целевого элемента, не используя родительский элемент, как это требуется в запросах стиля CSS.

В этом демо показано, как использовать if() для поддержки нового архитектурного подхода к CSS. Одно из преимуществ использования специальных свойств CSS вместо классов – простота их обновления в CSS. Например, их можно обновить с помощью запросов медиа или псевдосостояний, таких как :hover.

Дальнейшие действия

Добавление if() открывает новые архитектурные возможности для разработчиков CSS. По мере развития технологий, таких как запросы стилей, запросы диапазона, вероятно, можно будет выполнять в рамках функций if(), а также использовать их в сочетании с предлагаемыми пользовательскими функциями (CSS @function).

Дополнительную информацию об этих функциях можно найти в следующих статьях:

• Трехминутное видео с инструкциями по использованию демоверсии 3
• Статья Лии Веру