CSS функция if()

В CSS появилась новая функция if(), пока доступная только в Chrome 137 и выше. Это первый шаг к условной логике прямо в стилях.

CSS функция if()

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

Синтаксис выглядит так:

div {
  color: if(
              style(<условие>): <значение>;
              style(<другое-условие>): <другое-значение>;
              else: <значение-по-умолчанию>;
          );
}

Как видите, в функции if() можно указать несколько условий и соответствующих им стилей. Если ни одно из условий не соответствует, применяется значение else.

Функция style() определяет условие и значение, применяемое, если условие истинно.

Пример использования

Ниже — базовый пример использования конструкции if() в CSS.

<div class="dark">dark</div>
<div class="light">light</div>

С помощью условной логики можно применить цвет фона в зависимости от цвета элемента.

div {
  color: var(--color);
  background-color: if(
                        style(--color: white): black;
                        else: pink
                    );
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

Новая функция условного применения стилей проверяет, установлена ли переменная --color в значение white. Если да, то цветом фона устанавливается black, в противном случае по умолчанию устанавливается pink.

Пример на CodePen:

See the Pen

Более продвинутый пример

Помимо базовых условий, if() отлично подходит для более сложных сценариев — например, при динамической стилизации карточек в зависимости от их статуса.

Полезность if() особенно заметна в ситуациях, когда стили зависят от значений HTML-атрибутов или переменных.

Una Kravets с помощью атрибута data-status динамически изменяет border-color, background-color и grid-column элемента.

<div class="container">
  <div class="card" data-status="pending">
  </div>

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

  <div class="card" data-status="pending">
  </div>

  <div class="card" data-status="inactive">
  </div>
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border: 1px solid;
  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
                    );

  grid-column: if(
                    style(--status: pending): 1;
                    style(--status: complete): 2;
                    else: 3
                );
}

CodePen демонстрирующий этот пример.

See the Pen

Поддержка браузерами

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