var() с запасным значением

Второй аргумент var(): значение на случай отсутствия.

Уровень: средний 10 разделов 10 минут

1. Что это и зачем

Второй аргумент var(): значение на случай отсутствия.

Единицы делятся на абсолютные (px) и относительные (rem, em, %, vw, ch). Относительные единицы делают масштаб адаптивным: размеры зависят от корня, родителя или вьюпорта, и меняются при пересборке страницы.

{title} — база масштабируемости: правильный выбор единицы экономит десятки медиаправил.

2. Синтаксис и пример

.btn { background: var(--accent, #1d4ed8); }

Запись выше — базовый вариант использования. Обратите внимание, как var() с запасным значением вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Функции — это вычисления браузера: calc() складывает разнородные единицы, clamp() задаёт диапазон, min()/max() выбирают наилучшее значение, var() подставляет переменную.

В реальной разметке var() с запасным значением встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — база масштабируемости: правильный выбор единицы экономит десятки медиаправил.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

calc/clamp/min/max поддержаны во всех современных браузерах; старые получают fallback, если ему предшествует базовое значение.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Fallback страхует от «не определена».

Для обратной совместимости ставьте значение руками.

7. Практическое задание

Добавьте fallback всем ключевым переменным.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.btn { background: var(--accent, #1d4ed8); }

8. Как применять в проектах

rem для типографики и отступов, % и fr для раскладки, vw для «резиновых» элементов, clamp для адаптивных текстов.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

шрифты в rem, а не px;
проценты не создают неожиданных зациклений размера;
жёсткие px только для мелочей (бордеры, иконки);
calc() комбинирует единицы там, где нужно;
единицы соответствуют смыслу: ширина — %, высота — min/auto;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам