Введение в условные операторы и условную логику CSS

Условная логика — это знакомое понятие для любого, кто писал на языке программирования. В таких языках, как JavaScript или Python, используются операторы if для оценки выражений и выполнения различных блоков кода в зависимости от того, истинное или ложное else условие . До недавнего времени в чистом CSS не было эквивалентной условной логики во время выполнения — разработчики полагались на медиа-запросы, запросы функций или препроцессоры (например, Sass/SCSS) для условного применения стилей.

Данное руководство охватывает следующие темы:

• Вводит новую функцию if() в CSS.
• Чем это отличается от более ранних методов условного применения стилей?
• Предоставляет примеры, понятные для начинающих.
• Часто задаваемые вопросы (FAQ) для быстрого получения ответов.

Обратите внимание, что данное руководство предполагает, что вы уже знакомы с CSS.

Что такое «условные операторы» и как они связаны с CSS?

В программировании оператор if проверяет условие, а затем выполняет один набор инструкций, когда условие выполняется, true и другой, когда оно выполняется false. Можно представить это как принятие решения компьютером: если я голоден в 12 часов дня, то я пойду в столовую.

В контексте чистого CSS условная логика была невозможна без использования стороннего решения, такого как Sass/SCSS, который @if уже много лет предлагает свои собственные директивы. Sass компилирует эти директивы во время сборки; результирующий CSS не содержит условной логики во время выполнения. Как объясняется в документации Sass, он обеспечивает управление потоком, аналогичное JavaScript, позволяя компилировать стили только тогда, когда логическое выражение оценивается как истинное.

Важно отметить, что условные операторы CSS считаются экспериментальными (на момент написания этого текста), и их поддержка ограничена браузерами Chrome, Edge, Opera, Android Browser и Chrome для Android. Если вы читаете это в будущем, надеюсь, поддержка улучшится — вы можете проверить текущий статус на сайте: Can I Use.

Условное оформление без операторов if

Если вы не хотите использовать Sass или SCSS, пользователи чистого CSS нашли «обходной путь» для решения проблемы отсутствия if операторов, заставив условную логику работать другими способами, например:

• Медиа-запросы (например, @media (min-width: 700px) { … } для применения стилей к определенным размерам экрана. Они являются частью модуля условных правил CSS и широко поддерживаются.
• Запросы функций с использованием операторов @supports (<property-value>), которые применяют стили только в том случае, если браузер поддерживает определенную пару свойство-значение. Вы можете комбинировать несколько условий с помощью операторов and, or или not.
• Контейнерные запросы (@container), которые применяют стили в зависимости от размера или стиля родительского контейнера.
• Пользовательские свойства CSS и псевдоклассы (:hover, :focus, :nth?child(), и т. д.) для стилизации на основе состояния.

Все эти методы позволяют применять условные стили, но они не являются встроенными if операторами; для их использования требуются отдельные блоки правил. Новая if() функция впервые предоставляет встроенную условную логику внутри значений свойств.

Представляем if() функцию

Как if() это работает

Функция CSS if() — это экспериментальная функция выбора значения на основе ряда условий. MDN описывает её как предоставляющую «условную логику для значений свойств CSS», которая работает аналогично if…else операторам JavaScript. Её можно использовать внутри значения любого свойства CSS.

Функция if() содержит одну или несколько пар <if?condition> : <value>, разделённых точками с запятой, за которыми, при необходимости, следует оператор else : <value>. Условия оцениваются по порядку; первое условие, которое оценивается как true, возвращает соответствующее значение. Если ни одно условие не истинно, возвращается значение из else, или функция возвращает гарантированно недопустимое значение. Между if и его открывающей скобкой не должно быть пробела; в противном случае всё объявление недействительно.

Функция CSS if() позволяет задавать значения свойств CSS на основе ряда условий. Эта условная логика работает аналогично if…else операторам JavaScript и может использоваться внутри значения любого свойства CSS.

Обзор синтаксиса

	

/* Single Condition */
property: if(condition?1 : value?1;);

/* Multiple Conditions */
property: if(condition?1 : value?1;
             condition?2 : value?2;
);
             
/* Else Condition */
property: if(condition?1 : value?1;
             else : fallback
);

/* Multiple Conditions w/ Else */
property: if(condition?1 : value?1;
             condition?2 : value?2;
             /* …more conditions as needed */
             else : fallback
);           
	

• Условия могут проверять значения стиля, медиа-запросы или поддержку функций.
• Обычно один вариант else : value размещается в конце списка в качестве резервного/значения по умолчанию.

Доступные типы запросов в if()

Существует три типа запросов, которые if() поддерживаются операторами, то есть существует три типа условий, на основе которых мы можем принимать решения. В таблице ниже приведено описание трех типов запросов:

• style() - Проверяет вычисляемый стиль или пользовательское свойство одного и того же элемента. В отличие от запросов стиля контейнера, if() запросы style() не требуют наличия родительского элемента.
• media() - Проверяет медиафункцию, аналогично встроенному медиазапросу.
• supports() - Выполняет встроенный запрос функциональности; возвращает значение, если браузер поддерживает указанное свойство или функцию.

Применение if() на практике

Пример 1 – Одно условие

В этом примере я создал простое условное выражение if, в котором цвет текста абзаца меняется на красный, если задано пользовательское свойство CSS (переменная CSS p-color) bright.

	
<style>
.conditional-color {
  --p-color: bright;
  color: if(style(--p-color: bright): red;);
}    
</style>


<p class="conditional-color">This is a paragraph</p> 	
	

Пример 2 – Множественные условия и прочее

В этом примере мы расширили пример 1, добавив еще одно условие и else.

	
<style>
.multiple-conditions {
  --p-color: fancy;
  color: if(
    style(--p-color: bright): red;
    style(--p-color: dull): gray;
    else: orange;
  );
}   
</style>


<p class="multiple-conditions">This is a paragraph</p>	
	

Как видно из результата, поскольку значение p-colorне установлено bright ни на dull, то оно будет установлено на orange.

Пример 3 - Запрос media()

В этом примере мы используем media() запрос для проверки того, превышает ли ширина области просмотра 1000 пикселей или меньше, и в зависимости от этого изменяем цвет фона всего тела страницы.

Медиа-запросы — это уже очень полезная функция условного CSS, которая часто используется для изменения адаптивности. В сочетании с ними if() мы можем использовать медиа-запросы для изменения значений конкретных свойств, а не целых селекторов.

	
body {
  background-color: if(
    media(width > 1000px): red;
    media(width < 1000px): blue;
  );
}	
	

Пример 4 - запрос supports()

В этом примере мы используем supports() для проверки, поддерживает ли браузер функцию. display: grid;. Если поддерживает, то мы будем использовать её, в противном случае — display: block;.

Если вы знакомы с CSS, вы можете подумать, что это уже было возможно (и широко использовалось) без применения <script>, if() и вы будете правы. Но давайте рассмотрим различия ниже…

Без использования if() вы можете воспользоваться следующей распространенной реализацией:

	
  /* Fallback for browsers that don't support grid */
  .container {
    display: block;
  }

  /* If the browser supports grid, then use it */
  @supports (display: grid) {
    .container {
      display: grid;
    }
  }       
	

Но с помощью if() мы можем реализовать то же решение с меньшим количеством строк кода, как показано ниже:

	
  .container {
    display: if(
	    supports(display: grid): grid;
	    else: block;
    );
  }           
	

Заключение

Новая if() функция — это интересное дополнение к инструментарию CSS. Она добавляет встроенную условную логику, которая ранее требовала использования Sass или разрозненных медиа-запросов. Понимая, как if() она взаимодействует со стилями, медиафайлами и запросами поддержки, а также комбинируя её с пользовательскими свойствами и атрибутами данных, вы можете писать более выразительные и поддерживаемые стили. Помните о её экспериментальном статусе, поэтому используйте это руководство в качестве справочника для экспериментов с условными операторами CSS уже сегодня и будьте готовы к будущему адаптивного дизайна.