С некоторого времени функция calc(), позволяющая смешивать типы значений для расчета длин, чисел, углов, времени и многого другого, получила широкую поддержку, сильно облегчив жизнь веб-разработчикам. На практике это значит, что при разработке адаптивного сайта ширина элементов страницы может быть задана, например, в процентах, а отступы в пикселях. Именно таким способом была решена задача создания кнопок-ссылок для подвала сайта Flexalex.
See the Pen Footer Links Calc() Example by Elena Kazakova (@jphawk) on CodePen.
При размере экрана до 556px кнопки располагаются в два ряда по три штуки и разделены отступом в 1px. Расчет ширины одной кнопки осуществляется с помощью функции calc() – кнопка должна занимать одну треть от ширины экрана, но при этом учитывать отступ справа в 1px, то есть её ширина составит calc(100%/3 – 2px).
При размере экрана большем, чем 556px, все шесть кнопок располагаются в один ряд, разделенные единичными отступами справа. Ширина одной кнопки может быть рассчитана с помощью выражения calc(100%/6 – 5px).
Казалось бы, данный пример можно реализовать и без применения calc(), пользуясь исключительно процентами (а в случае отступов десятыми долями процентов). Однако при определенных размерах экрана отступ может стать меньше 1px и исчезнуть, испортив внешний вид страницы. Именно из-за способности справляться с подобными проблемами calc() считается незаменимой функцией в инструментарии веб-разработчика.