CSS if() – провал или прорыв?
Осенью 2025 года в Chrome появилась экспериментальная функция — if(). Эта функция позволяет устанавливать значение CSS-свойства в зависимости от внешних условий.
Первый тип условий — это стилевые запросы. В примере мы используем условие style(--scheme: dark) внутри функции if, чтобы проверить значение CSS-переменной. Если условие выполняется, то мы задаём серый цвет фона.
Если изменить значение переменной, условие не выполнится, и функция возвращает «Guaranteed-invalid value», что эквивалентно значению initial.
Можно добавить ещё одно условие для нового значения переменной и задать другой цвет фона.
Поменяем значение переменной ещё раз.
Можно добавить ветку else для обработки всех значений, которые не соответствуют предыдущим условиям.
Второй тип условий, с которыми работает функция if(), — это медиавыражения.
Зададим заголовку размер шрифта 72px, если ширина вьюпорта больше 700px, и 42px — в противном случае.
Третий тип условий — это «feature queries» (проверка возможностей). Например, можно проверить, что функция element()не поддерживается, и в этом случае задать красный цвет текста.
Если поддерживается функция sibling-count(), задать белый цвет фона.
Вот и всё. Больше никаких условных выражений функция if() не поддерживает (по состоянию на момент релиза).
Все показанные примеры можно реализовать с помощью знакомых CSS-директив: @container, @media, @supports.
Давайте убедимся в этом. Зададим переменную --scheme со значением other для корневого элемента (:root). Для тега body установим красный цвет фона. Это будет аналогом ветки else из предыдущего примера.
Добавим контейнерный стилевой запрос (container style query), в котором будем проверять --scheme: dark. Стили пока не применились.
Изменим значение переменной --scheme в селекторе :root, и после этого начнёт срабатывать наш контейнерный стилевой запрос. Внутри него активируется CSS-правило для тега body, которое переопределит ранее заданный цвет фона.
Снова изменим значение переменной.
Добавим ещё один стилевой запрос для нового значения, чтобы снова изменить цвет фона.
Теперь зададим стили по умолчанию для заголовка.
Добавим стандартное медиавыражение, которое изменяет размер шрифта заголовка на широких экранах.
Добавим директиву @supports, которая проверяет отсутствие поддержки CSS-функции element().
И директиву @supports, которая проверяет наличие поддержки CSS-функции sibling-count().
С помощью директив мы добились того же поведения стилей, что и раньше с использованием функции if().
Вывод. Функция if() не предоставляет новых возможностей. Это синтаксический сахар, который позволяет использовать существующие проверки на уровне значений свойств.
На первый взгляд, код с if() кажется более компактным, чем код с директивами. Однако это справедливо только в тех случаях, когда необходимо изменить значение только одного свойства, что встречается редко.
Можно ли назвать релиз if() неудачным? Всё зависит от ожиданий.
Используем аналогию с условной конструкцией внутри простой JS-функции. Мы сравниваем две переменные и, в зависимости от результата сравнения, выполняем несколько команд в одной из веток условия.
CSS-правило можно назвать аналогом функции в языке программирования, а CSS-свойства — аналогами команд.
Таким образом, условная конструкция в CSS могла бы выглядеть следующим образом: мы берём CSS-переменные, сравниваем их и, в зависимости от результата сравнения, активируем тот или иной набор свойств.
Но в действительности мы получили другое.
Во-первых, if() работает только на уровне значений свойств. Одно значение — один вызов if(). Во-вторых, внутри if() можно использовать только ограниченные возможности стилевых запросов.
Представьте язык программирования, в котором условные конструкции можно использовать только после оператора присваивания, и то лишь в виде тернарных операторов.
К тому же, в условных выражениях нельзя использовать операторы < или >, доступно только сравнение на равенство. И, вишенка на торте, в условиях можно использовать только одну переменную.
Именно к такому языку программирования приблизился CSS благодаря if().
Но есть маленький лучик надежды на то, что условия в CSS будут развиваться и дальше.
Имя этого лучика — самозапросы.
Посмотрите ещё раз на обычный стилевой контейнерный запрос.
Стилевой запрос позволяет проверить значение переменной у родительского элемента (точнее, по цепочке родительских элементов).
В примере стили body изменяются, так как на корневом элементе (обычно это html, который является родителем для body) установлена подходящая переменная.
Если переместить переменную --scheme непосредственно в body, то стилевой запрос перестанет срабатывать. Это происходит потому, что у родительских элементов больше нет подходящей переменной.
Теперь добавим элемент h1 с условной конструкцией, в которой проверяется значение переменной --size. Поскольку этой переменной сейчас нет, срабатывает ветка else, и мы получаем размер шрифта 72px.
Теперь добавим переменную --size непосредственно в CSS-правило для h1. Условное выражение срабатывает, и размер шрифта уменьшается!
Функция if() умеет работать с переменными самого элемента, а не только его родительских элементов.
Обычные CSS-директивы умеют работать только с родительскими элементами, а функция if() может работать как с родительскими элементами, так и с текущим элементом.
Это небольшое, но важное отличие. Этот шаг вперёд для CSS даёт надежду, что текущий релиз — это всего лишь «препатч» перед большим контентным аддоном, в котором возможности условий в CSS будут существенно расширены.
Функция if() уже может работать с переменными в своём CSS-правиле. Можно ли научить её использовать несколько переменных и дополнительные операторы сравнения? Вполне возможно. Сделают ли это? Надеемся, что да.
На самом деле, уже сейчас мы можем нативно сравнивать CSS-переменные, хотя это и не так изящно и компактно, как хотелось бы.
Ещё более сложная задача — вынести if() с уровня значений свойств на уровень CSS-правил.
Если разработчики смогут это реализовать, то CSS действительно станет ближе к привычным языкам программирования.
