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