Условные операторы 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=>"c<ompl>ete"
  ...
/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);
}

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

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

Что дальше?

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

Чтобы узнать больше об этих функциях, ознакомьтесь с информацией:

• 3-минутное видео-обзор Демо №3
• Статья от Леи Веру