CSS max() — как работает

Когда применять

В материале о «max()» основное внимание уделено области «CSS-функции». Функция max() вычисляет CSS-значение из переданных аргументов. Проверяйте поведение «max()» на панели управления с асинхронным обновлением данных, причём проверяйте и светлую, и тёмную цветовую схему.

Синтаксис max()

Для демонстрации «max()» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.

.demo {
  width: max(…);
}

Как работает max()

Возвращает значение, тип которого должен подходить выбранному свойству. Для «max()» проверьте две контрольные точки — изменение DOM в панели Elements и состояние при пустом содержимом: так видно, на каком этапе появляется итоговое поведение этой темы.

Проверка в проекте

• Проверяйте единицы, диапазоны аргументов и запасное значение; результат относится непосредственно к «max()».
• Заменить демонстрационные данные пустыми и проследить за состоянием интерфейса при разборе «max()».
• Проверьте «max()» на панели управления с асинхронным обновлением данных через изменение DOM в панели Elements и запишите наблюдаемое изменение.

Практика с max()

Создайте два варианта «max()» на контрольной странице: корректный и с одной типичной ошибкой. Сравните варианты «max()» через изменение DOM в панели Elements и объясните различие.

Ошибки при работе с max()

Поддержка max()

Для «max()» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «max()»; окончательное решение принимайте по аудитории конкретного проекта.

Спецификация: источник 1.

Вопросы о max()