CSS переменные и их использование в верстке

К использованию CSS-переменных я так и не пришел, поскольку имплементация LESS произошла раньше, чем нативное использование переменных было реализовано без ограничений всеми браузерами. Тем не менее, понимание и навык их использования без сторонних препроцессоров необходим каждому, кто имеет дело с версткой сайтов.

Фактически, CSS-переменные представляют собой кастомные свойства, которые каскадируются и наследуются как и стандартные.

Вполне привычным является тот факт, что переменные CSS могут быть глобальными и локальными. Использовать их просто:

// Глобальная CSS переменная
:root {
  --textcolor: #000;
}
// Локальная CSS-переменная
div.block {
   --textcolor: #666;
}

Как видим, для объявления глобальной переменной ее необходимо поместить в контейнер :root. Локальные переменные объявляются внутри соответствующих контейнеров.

Как использовать CSS переменные

Использование переменных в CSS-коде также не вызовет особых сложностей. Сделать это можно с помощью функции var():

:root {
  --back: #090;
}
…
background: var(--back, green);

Как видим, у нее два аргумента: второй используется в качестве резервного на случай если не определен первый. Большинство сложностей у верстальщиков возникает именно с пониманием очередности применения аргументов при различных условиях. Именно этот момент мы и рассмотрим.

Вариантов может быть четыре:

1. Браузер не поддерживает CSS-переменные. В этом случае для фона будет использовано значение green.
2. Если браузер поддерживает CSS-переменные, и --back определено, в качестве фона использован будет именно этот цвет (#090).
3. Если браузер поддерживает CSS-переменные, а --back не определено, будет использовано резервное значение green,
4. Если браузер поддерживает CSS-переменные, а --back определено, но имеет некорректное значение, фон не будет определен вообще.

Четвертый вариант ожидаемо вызовет наибольшее непонимание. По логике вещей, должно сработать fallback-значение green, ведь это будет так если мы используем последовательность

background: green;
background: reen;

Поскольку второе значение браузер не поймет, фон будет иметь стандартный цвет green. Однако есть один важный момент: в последнем примере значение ‘reen’ браузер отвергнет во время парсинга. Если же будет использована переменная, она “перекроет” предыдущее значение, так что при парсинге альтернатива существовать не будет, и при нелегитимном значении будет использовано значение по умолчанию, т. е. transparent.

Поддержка CSS переменных браузерами

Сегодня все браузеры с последними обновлениями поддерживают CSS-переменные. Если же вам необходимо “пуленепробиваемое” решение, необходимо использовать feature queries:

html { color: red; }
…
@supports (--css: variables) {
  html { color: black; }
}

Конструкция правильная, но слегка неуклюжая: нам приходится по умолчанию использовать стили для “устаревших” браузеров. Конечно, можно так:

html { color: black; }
…
@supports not (--css: variables) {
  html { color: red; }
}

Но в этом случае исключение будет сделано для браузеров, которые:

1. Поддерживают feature queries
2. Не поддерживают CSS-переменные

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

Выводы и заключение

Несмотря на свою актуальность, CSS-переменные даже в настоящее время плохо понимаются и редко используются. Причина состоит в том, что такие CSS-препроцессоры, как SASS/SCSS и LESS, ушли далеко вперед в реализации схожего функционала. Но это только одна сторона медали: декларативные CSS переменные и их реализация в препроцессорах серьезно различаются. Мы обсудим это в отдельной статье, а на сегодня это все. Надеемся, что сегодняшняя публикация поможет вам верстать более продуктивно!