CSS var() — как работает
CSS var(): принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Практический смысл
В материале о «var()» основное внимание уделено области «CSS-функции». Функция var() вычисляет CSS-значение из переданных аргументов. Проверяйте поведение «var()» в сетке с карточками разной высоты, причём используйте нативное действие вместо имитации клика.
Перед применением «var()» сформулируйте ожидаемое поведение, затем проверяйте единицы, диапазоны аргументов и запасное значение. Для «var()» такое сравнение показывает реальную причину изменения.
Синтаксис var()
Синтаксис «var()» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.demo {
width: var(--content-width, 60rem);
}Как работает var()
Чтобы объяснить работу «var()», проследите путь от структуры и входного значения до отображения или поведения. Возвращает значение, тип которого должен подходить выбранному свойству. Контрольная точка для «var()» — поведение без пользовательской таблицы стилей.
Проверка в проекте
- Проверяйте единицы, диапазоны аргументов и запасное значение; результат относится непосредственно к «var()».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «var()».
- Проверьте «var()» в сетке с карточками разной высоты через момент загрузки ресурса в Network и запишите наблюдаемое изменение.
Оставляйте «var()» в решении только после проверки в сетке с карточками разной высоты. Если нативная конструкция решает задачу «var()» с меньшим числом условий, используйте её.
Практика с var()
Проверьте «var()» в тестовом шаблоне с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «var()»: проверяйте единицы, диапазоны аргументов и запасное значение.
Сценарий: в сетке с карточками разной высоты.
Ошибки при работе с var()
Поддержка
Результат var() должен соответствовать типу значения свойства, где используется функция — это предметный риск для «var()».
Контекст
Скрытие фокуса без равноценной заметной замены при использовании «var()».
Устойчивость
Смешивание данных, оформления и поведения в одной хрупкой конструкции; для «var()» проверьте это отдельно.
Поддержка var()
Для «var()» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «var()»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о var()
Как понять, что «var()» выбрано правильно?
«var()» выбрано правильно, когда оно решает задачу «вычислить значение из аргументов внутри CSS-декларации», сохраняет результат в сетке с карточками разной высоты и проходит предметную проверку: проверяйте единицы, диапазоны аргументов и запасное значение.
Нужен ли запасной вариант для «var()»?
Запасной вариант для «var()» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «var()» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.