Chrome добавил поддержку if() функций в CSS

Photo Credits: Chrome For Developers

Функция if() это часть спецификации CSS и описана в разделе the if() notation. Это часть стандарта, но она в драфте, Chrome первый добавил поддержку этой функции.

Синтаксис

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

Функция последовательно оценивает каждое условие и возвращает значение, связанное с первым истинным условием. Если ни одно из условий не оценивается как истинное, функция возвращает пустой поток токенов.

Синтаксис:

selector {
  color: if(
      style(<condition>): <value>;
      style(<another-condition>): <value>;
      else: <value>;
  );
}

Пример:

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

.dark {
  --color: black;
}

.light {
  --color: white;
}

Это круто?

Да, пока мы ждем паттерн матчинг в JavaScript, его добавили в CSS

И всё же, почему это круто? if() в CSS это выражение, а значит, он возвращает результат своего внутреннего выражения при вызове. В отличие от if оператора в JavaScript, где if() - это управляющая конструкция, а не выражение, т.е он ближе к тернарному оператору, чем к классическому if()

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

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