Крутые трюки с переменными CSS

Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств вроде цветовой палитры или шрифтов в одном месте. В препроцессорах работа с переменными куда более гибкая, но магия SASS/SCSS применима не всегда и не везде, и в реальном мире часто обходятся без них, что нередко ведёт к раздуванию и размазыванию кодовой базы по разным файлам и форматам. В этой статье мы рассмотрим несколько интересных хаков, которые позволяют построить на механизме custom properties вещи, кажущиеся невозможными без препроцессоров или вмешательства JS.

Избегаем повторного определения цветов

Определять темы в чистом CSS не самое приятное занятие: обычно переключение на тёмную палитру требует смены сразу многих цветов для многих элементов: фоны, текст, ссылки, кнопки и так далее. Исходные предпочтения пользователя получаются медиа-запросом prefers-color-scheme, внутри которого нужно расставить новые цвета для всех селекторов, что приводит к раздуванию:

  :root {
    --background: #fff;
    --text-color: #000;
    --link-color: #0089c7;
    --primary-color: #165fb9;
    /* ... */
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --background: #1b1b1b);
      --text-color: #eaeaea;
      --link-color: #b76c10;
      --primary-color: #8916b9;
      /* и в том же духе на десятки строк в разных скоупах */
    }
  }

В CSS нет другого механизма для изменения переменных, но повторения всё же можно избежать с помощью дополнительных значений:

  --background: var(--light, #fff) var(--dark, #1b1b1b);

Если использовать переменную --light со значением initial, а в --dark передать валидное, но неприменимое значение, то --background получит цвет #fff. Для этой ситуации у CSS такое значение есть, и это… пробел. Таким образом, для белой темы строка распарсится так:

  --background: #fff  ;

А для тёмной так:

  --background:  #1b1b1b);

Обратите внимание на пробелы, они не ломают синтаксис (что сбросило бы определение всей строки). Теперь осталось только вынести переключатель состояния в отдельные переменные:

  :root {
    /* --ON и --OFF заменяют двоичную переменную */
    --ON: initial;
    --OFF: ;
  }
  
  /* выбираем светлую тему по умолчанию */
  .theme-default,
  .theme-light {
    --light: var(--ON);
    --dark: var(--OFF);
  }
  
  .theme-dark {
    --light: var(--OFF);
    --dark: var(--ON);
  }
  
  /* медиа-запрос теперь нужен только для переключения */
  @media (prefers-color-scheme: dark) {
    .theme-default {
      --light: var(--OFF);
      --dark: var(--ON);
    }
  }

Теперь цветовые схемы можно определять в одном месте, выглядеть это будет так:

  :root {
    --background: var(--light, #fff) var(--dark, #1b1b1b);
    --text-color: var(--light, #000) var(--dark, #eaeaea);
    --link-color: var(--light, #0089c7) var(--dark, #b76c10);
    --primary-color: var(--light, #165fb9) var(--dark, #8916b9);
    /* ... */
  }

Такой код менее нагляден по сравнению с классическим определением, но к нему легко привыкнуть, и он не только экономит кучу места, но и уменьшает шанс ошибиться при изменении.

Используем switch-case в языке без логики

Как мы помним, в CSS не существует явных условных операторов для управления состоянием кроме медиа-запросов. Но структура этого языка иногда подбрасывает возможности там, где их никто не планировал. Встречайте: switch-case на анимации!

Для свойства animation можно создавать любое количество ключевых кадров (@keyframes), которые можно использовать как постоянное хранилище состояния, если держать анимацию остановленной. Для каждого кадра нужно знать точную задержку, чтобы остановленная анимация показывала нужный момент, а не фиксировалась на первом кадре. Вот наглядный пример:

Разберём принцип работы:

• Анимация остановлена через animation-play-state: paused.
• Отрицательная задержка в animation-delay заставляет анимацию останавливаться на конкретном кадре (или между двумя определёнными кадрами, так работает градиент на первом ползунке). Значения на ползунке — от -100s до 0s.
• В animation-duration можно указать любое удобное число, но нужно помнить, что при проигрывании последнего кадра анимация выключается, поэтому максимальная длительность не должна совпадать по времени с последним определённым кадром (case). Поэтому в примере выше разброс ползунка 100 секунд при длительности 100.001s.

Бинарная логика на функции calc()

В первом трюке мы уже использовали переменные --ON --OFF вместо двоичной переменной. В custom properties можно хранить числовые значения, и с помощью вычислений разных параметров через calc() и clamp() можно получать 0 или 1 в самых разных сценариях (подробнее в этой статье). Довольно неудобно даже инвертировать значение явным присваиванием, как в примере выше, а пытаться строить на этом какую-то логику и вовсе кошмар. Хорошо, что основные логические операции можно выполнять прямо в объявлении переменных!

not
Тут всё просто, 1 — 0 = 1, 1 — 1 = 0

  --not: calc(1 - var(--j))

and
Простое умножение:
0 * 0 = 0
1 * 0 = 0
0 * 1 = 0
1 * 1 = 0

  --and: calc(var(--k)*var(--i))

nand
1 — and = инвертированный and

  --nand: calc(1 - var(--k)*var(--i))

or
Если хотя бы один из операндов равен единице, or возвращает единицу:
k or i = (not k) nand (not i)

  --or: calc(1 - (1 - var(--k))*(1 - var(--i)))

nor
Аналогично с nand, nor = 1 — or:

  --nor: calc((1 - var(--k))*(1 - var(--i)))

xor
Возвращает единицу, если ровно один из операндов равен единице:

  --xor: calc((var(--k) - var(--i))*(var(--k) - var(--i)))

Заключение

Имея на руках бинарную логику и условные операторы, в CSS можно реализовать кучу вещей, которые раньше казалось возможным делать только через грубое вмешательство со стороны JS. Но есть один нюанс — чем глубже в дебри, тем менее читаемым становится код и тем сложнее его писать и поддерживать. Поэтому список подобных трюков можно продолжать ещё очень долго, но большинство приёмов из него почти наверняка не пригодятся в реальном мире. Зато основные концепции вроде switch и or помогут обойтись красивым CSS-only решением там, где раньше это казалось невозможным.

---

Облачные серверы от Маклауда подходят для размещения веб-проектов любой сложности! Вы можете создать собственную конфигурацию сервера в течение минуты и менять эти параметры в любой момент через удобную панель управления.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!