Операторы if и else в CSS

Уже долгое время в CSS есть возможность применять стили в зависимости от условий. Может быть кто-то скажет «Ой, как это?», но мы умеем применять @media и знаем псевдоклассы типа :empty или более распространенного :checked. Также давно решаем задачи логической стилизации на основе количества (:nth-child) или наличия (:has()) элементов. Это далеко не весь список задач, с которыми прекрасно справляемся.

Но в черновике спецификации CSS появилась функция if. Пока она экспериментальная и браузеры могут реализовывать её как угодно и менять по дороге. Не забывайте смотреть поддержку на caniuse.com. На момент написания статьи поддержка есть в Chrome и Edge.

Функция CSS позволяет устанавливать различные значения для свойства в зависимости от результата проверяемого выражения. Применяется только к одному конкретному выбранному свойству, а не к селектору целиком.

Например, условие по стилю

.block {
  background: if(style(--scheme: dark): #eeeeee;)
}

или на основании media

.block {
  background: if(media(width >= 768px): 0 auto;)
}

Как и положено в языках программирования, в паре к if должен быть else. Он есть и тут

.block {
  background: if(
    style(--scheme: dark): #333333;
    style(--scheme: bright): #ff0000;
    else: #eeeeee;
  )
}

Предположим, на сайте есть три темы, управляемые через кастомные свойства. Если установлена темная тема, то установи цвет фона #333333, если выбрана «яркая», то сделай красным, а иначе пусть будет светло-серым. Если ни одно из условий не подошло, а ветки else нет, то ничего не применится.

Если найдено условие, дающее true (истинное), то дальше проверка не идёт.

Также можно использовать логику and, or, или not внутри запросов стилей

border-color: if(
  media((width > 700px) and (width < 1000px)): blue;
);

Песочница в которой можно попробовать функции:

See the pen (@Websitio) on CodePen.