В CSS появится встроенная условная обработка.
Те, кто почувствовал себя зажатым в декларативной природе универсальных таблиц стилей Интернета, получат немного больше свободы, чтобы немного их смешать.
В течение многих лет разработчики и дизайнеры спрашивали в Stack Overflow и других местах, есть ли в CSS какая-либо условная логика, находя только возможные обходные пути. Теперь технический комитет, стоящий за стандартом стиля, утвердил новую функцию для таблицы стилей, if(), которая открывает совершенно новый мир выбора для дизайнеров.
«Насколько мне известно, это первый случай, когда вы можете реализовать эту логику в реальном времени и не иметь выделенного блока кода в конце файла», — сказал Марк Адкинс, главный дизайнер пользовательского опыта в финансовой компании Fidelity Investments, в докладе о некоторых из последних разработок в области CSS на конференции AllThingsOpen 2025 в начале этой недели.
CSS, управляемый Консорциумом Всемирной паутины (W3C), представляет собой стандартизированный способ определения представления, стиля и макета веб-страниц, работающий вместе с HTML для макета страниц и JavaScript для их логики.
CSS — это зрелая технология, поэтому она не обновляется так часто, как раньше. Раз в год W3C выпускает снимок, в котором собраны все последние разработки по различным частям спецификации (редакция 2025 года была опубликована в прошлом месяце). Затем производители браузеров должны увидеть реализацию этих спецификаций, ход которой тщательно отслеживается на сайте «Могу ли я использовать».
Что такое функция CSS if()?
Новая функция, появившаяся в снимке 2025 года, является беспрецедентной для CSS.
«Это действительно застало меня врасплох», — признался Адкинс публике.
Хотя большая часть CSS посвящена затенению, окраске и различным другим деталям представления, спецификация не предлагает многого в плане логической обработки.
If() основан на предыдущей работе и позволяет разработчикам указывать переменные или «пользовательские свойства», — сказал Адкинс. Свойства, определенные в объектной модели документа (DOM) браузера, затем можно изменить с помощью JavaScript.
Новая функциональность расширяет логические свойства на сам встроенный код.
В мире программирования сама по себе функция if() не является чем-то новым — в большинстве императивных языков есть версия этой функции. Функция if() основана на функции JavaScript if… else и предоставляет программисту возможность устанавливать различные значения свойства в зависимости от результата условной проверки. Если а, то х, если б, то у и так далее.
Вы также можете указать оператор else, если ни одно из условий не выполнено.
В случае CSS тест может быть основан на запросе стиля, медиа-запросе или запросе функции.
Как функция if() работает в CSS
Согласно спецификации, оператор состоит из упорядоченного списка операторов, разделенных точкой с запятой, каждый из которых определяет условие и значение, разделенные двоеточием.
Синтаксис функции, похищенный из документации Mozilla Development Network, можно увидеть здесь:
MDN также предоставляет пример того, как можно использовать if(): Ниже вы увидите, что на веб-странице можно разместить одно из двух фоновых изображений в зависимости от выбранной темы («лед» или «огонь»):
По словам Адкинса, функция может быть встроена в любое свойство класса или как часть селектора.
Текущее внедрение и поддержка браузера
В настоящее время функция if() поддерживается в браузерах лишь частично.
Поддержка браузером функции CSS if() по состоянию на октябрь 2025 г. Источник: Могу ли я использовать.
Chrome и Edge поддерживают эту функцию, а Safari и Firefox по-прежнему отстают. Разработка мобильных устройств отстает еще больше: это утверждение признают только Chrome для Android и браузеры Android.
Поддержка функции CSS if() в мобильных браузерах по состоянию на октябрь 2025 г. Источник: Могу ли я использовать.
Новые возможности с условными выражениями CSS
«Добавление if() открывает новые архитектурные возможности для разработчиков CSS», — написала руководитель разработки веб-интерфейса Google Web UI Уна Кравец в своем блоге, описывая способы использования нового условного оператора.
Эту функцию можно использовать для создания встроенных медиа-запросов, предположил Кравец. Например, веб-сайт может менять дизайн в зависимости от предпочтений пользователя: светлый или темный режим. Его также можно использовать для выполнения встроенных запросов в службу поддержки, проверки того, поддерживает ли оборудование данную конструкцию, и переключения на альтернативную конструкцию, если нет. Это может быть удобный способ визуализировать состояние запущенного процесса с помощью различных изображений, показывающих, завершено задание или нет.
ТЕНДЕНЦИОННЫЕ ИСТОРИИ YOUTUBE.COM/THENEWSTACK Технологии развиваются быстро, не пропустите ни одной серии. Подпишитесь на наш канал YouTube, чтобы смотреть все наши подкасты, интервью, демонстрации и многое другое. ПОДПИСАТЬСЯ Группа, созданная в Sketch. Джоаб Джексон — старший редактор The New Stack, специализирующийся на облачных вычислениях и системных операциях. Он освещал вопросы ИТ-инфраструктуры и ее развития более 30 лет, в том числе работал в IDG и Government Computer News. До этого он… Подробнее от Джоава Джексона
