CSS Academy · Урок

Резервные значения и var()

Задавайте резервные значения в var() на случай, если пользовательское свойство не определено или недействительно.

«Резервные значения и var()» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Синтаксис резервного значения var()

Функция var() принимает необязательный второй аргумент — резервное значение, используемое, если пользовательское свойство не определено.

<button class="button">Fallback: royalblue</button>

Когда применяются резервные значения

Резервное значение используется, когда:

Свойство не определено в области видимости
Свойству присвоено значение initial
Свойство объявлено со значением, недопустимым в данном контексте

Несколько уровней резервных значений

Вкладывайте вызовы var() друг в друга, чтобы объединить несколько уровней резервных значений:

<p class="text">Falls through two levels to #3b82f6</p>

Резервным значением может быть любое значение

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

<div class="card">16px / 50%</div>

Ключевое слово initial

Присвоение пользовательскому свойству значения initial делает его как будто никогда не заданным. В сочетании с резервным значением это позволяет компонентам отказаться от унаследованного пользовательского свойства.

<div class="no-theme">
  <button class="button">Falls back to gray</button>
</div>

Гарантированно недопустимое значение

Использование initial в качестве значения пользовательского свойства гарантирует срабатывание резервного значения. Это позволяет создавать в CSS переключатели необязательных возможностей.

Пользовательское свойство и @property

Правило @property (Houdini) регистрирует типизированное пользовательское свойство с гарантированным начальным значением. Это надёжнее, чем полагаться на резервные значения.

<div class="track">
  <div class="bar"></div>
</div>

Резервное значение для безопасных анимаций

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

<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>

Диагностика отсутствующих переменных

Если пользовательское свойство отсутствует и резервное значение не задано, свойство вычисляется как его начальное значение (часто это ключевое слово initial). Для цветов это может привести к неожиданным прозрачным или чёрным результатам. Всегда добавляйте резервные значения для важных свойств.

var() в пользовательских свойствах

Значения пользовательских свойств могут сами обращаться к другим пользовательским свойствам, создавая цепочку значений:

<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>

Резервные значения и специфичность

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

Быстрая проверка

Что делает color: var(--theme-text, #111), если --theme-text не определено?

Итоги

var(--name, fallback) предоставляет резервное значение, если пользовательское свойство не определено. Резервные значения можно вкладывать друг в друга, создавая несколько уровней. Используйте @property для типизированных пользовательских свойств с гарантированными начальными значениями. Всегда указывайте резервные значения для важных визуальных свойств.

Часто задаваемые вопросы

Урок «Резервные значения и var()» бесплатный?

Да — полный текст урока «Резервные значения и var()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Резервные значения и var()»?

Задавайте резервные значения в var() на случай, если пользовательское свойство не определено или недействительно. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Резервные значения и var()»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy