What? if()?

Обо мне

Алёна Батицкая

• 10 лет во фронтенде
• Google Developer Expert по Web
• Редактор в Доке
• Пишу, перевожу, преподаю

Что такое if()?

Это CSS-функция, позволяющая задать свойству значение (или его часть) в зависимости от условий.

Поддержка в браузерах

Chrome 137+

Базовый пример

			.block {
			  flex-direction: if(
			    media(width < 700px): column;
			    else: row;
			  )
			}
		

Демо: flex-direction

Синтаксис if()

• Пишем if() как значение свойства
• Условия разделяем ;
• Ветка else — по желанию

Минимальный синтаксис

			background-image: if(); /* пустое значение */
			background-color: if(else: yellow);
		

Можно вкладывать if в if!

Три типа условий

1. style()

Значение в зависимости от кастомной переменной (похоже на @container style())

			color: if(
			  style(--theme: dark): white;
			  style(--theme: pink): gray;
			  else: black;
			)
		

style() — ограничения

• Только кастомные переменные
• Только строгое равенство
• style(--angle < 45) — ❌ не работает

2. media()

Всё как в @media, только для одного свойства

			media(min-width: 700px): white;
      /* 🤝 */
			media(width >= 700px): white;
		

media() — примеры

			color: if(media(print): black);
			opacity: if(media(hover: hover): 0.8);
			transition: if(media(prefers-reduced-motion): none);
		

3. supports()

Проверка поддержки CSS-фичи браузером

			display: if(
			  supports(display: grid-lanes): grid-lanes;
			  else: grid;
			)
		

Комбинирование условий

			/* ✅ Можно внутри одного типа */
			style((--theme: dark) and (--user: admin)): red;
			 
			/* ❌ Нельзя разные типы */
			media(width < 700) and style(--user: admin): red;
		

if() как часть значения

			border: 3px solid if(
			  media(width > 700px): red;
			  else: green;
			);
		

Демо: if() в border

Порядок важен!

Порядок условий

Сработает первое правило, вернувшее true

Не стоящее последним, как в каскаде!

Демо: первое условие побеждает

Демо: правильный порядок

А что с каскадом?

Каскад — это база 💪

Нижестоящее правило перебьёт if()

if() вычисляется в значение, веса не добавляет

Демо: каскад и if()

Фоллбэк

			.element {
			  color: black; /* фоллбэк */
			  color: if(
			    style(--theme: dark): navy;
			    else: snow;
			  );
			}
		

if() + другие функции

			width: calc(if(
			  style(--mode: compact): 50%;
			  else: 80%;
			) - 2em);
		

Главное не запутаться в скобках =)

Зачем нужен if()?

«У нас же уже есть @media, @container...»

• Директива может быть далеко от правил
• Нужно следить за порядком файлов
• Иногда меняем одно свойство — удобнее писать в одном месте

Идеально для тем!

Все условия в одном месте!

			:root {
			  --bg: if(
			    style(--theme: dark): #0d1117;
			    style(--theme: pink): #fdf2f8;
			    else: #ffffff; /* light */
			  );
			}
		

Демо: темы с if()

Вектор развития CSS

От фиксированных → к вычисляемым значениям

Новые функции CSS

CSS становится более декларативным

Почему не JS?

Мухи отдельно, котлеты отдельно 🍔

• HTML — семантика и контент
• CSS — стили
• JS — логика

CSS Working Group

Отслеживает юзкейсы, где разработчики используют JS для стилей

И переносит эту логику в CSS 🎯

Полезные материалы

Спасибо! 🎄

С наступающим Новым Годом!