+7 (937) 141-32-58
Контакты

CSS-функция if: новая логика стилей без JS — что это и как применять

Как работает новая функция if в CSS, зачем она нужна, где уже используется и какие у неё ограничения.

Все статьи

CSS-функция if: новая логика стилей без JS — что это и как применять

Новая эра в CSS: зачем нужен if?

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

Рабочий синтаксис условия в CSS

.box {
   width: 300px;
   height: 300px;
   background-color: #red;
   }
@media (width <= 1000px) {
   .box {
      background-color: blue;
   }
}
@media (width <= 600px) {
   .box {
      background-color: green;
   }
}

Синтаксис функции if

.box {
   width: 300px;
   height: 300px;
   background-color: if(
      media(width <= 600): green;
      media(width <= 1000): blue;
      else: red;
   );
}

Синтаксис функции if c переменными

property: if(
   style(--var: value1): result1;
   style(--var: value2): result2;
   else: fallback
   );

Каждое условие проверяет соответствие переменной конкретному значению. Если ни одно не срабатывает — используется else.

Пример: адаптивная кнопка по теме

<button class="btn" data-theme="dark">Отправить</button>
.btn {
   --theme: attr(data-theme);
   background: if(
      style(--theme: dark): #111;
      style(--theme: light): #eee;
      else: gray
   );
}

Стили адаптируются в зависимости от значения атрибута, и не требуют JS-кода.

Преимущества if в CSS

  • Нативная условная логика — без классов и скриптов
  • Темизация и UI-состояния через CSS-переменные
  • Чистый код — вся логика в одном месте
  • Меньше дублирования — компактные правила
  • Совместимость с attr() — автоматические стили от HTML-атрибутов

Ограничения и подводные камни

  • Поддерживается только в Chrome 137+ (на июнь 2025)
  • Нет поддержки числовых сравнений, логических операторов
  • style() работает только с текстовыми значениями
  • Safari, Firefox и iOS-браузеры игнорируют функцию
  • Сложности с отладкой — ошибки не видны в DevTools
  • Пока не подходит для массового продакшна без фолбэков

Как использовать безопасно

Лучшее решение — комбинировать if() с базовыми значениями. Например:

.card {
   border-color: gray; /* fallback */
   border-color: if(
      style(--priority: high): red;
      else: gray
   );
}

Так стиль сработает в поддерживаемом браузере, а в других — останется безопасное дефолтное оформление.

Делаем выводы

Функция if в CSS — это прорыв, но пока ещё экспериментальный. Она упрощает код, делает его декларативным и динамическим. Однако для полноценного внедрения нужно дождаться поддержки в Safari и Firefox. Сейчас мы рекомендуем использовать её с фолбэками в новых проектах и внимательно следить за развитием спецификации.