Жемчужина CSS3 — функция calc()

Оригинал: http://www.sitepoint.com/css3-calc-function

Перевод: Влад Мержевич

В модулях спецификации CSS3 найдётся множество скрытых жемчужин. В этой статье мы взглянем на calc() — невероятно полезное свойство, которое может изменить ваш подход к вёрстке сайта.

Функция CSS3 calc() в первую очередь используется для вычисления длины, чисел, углов, времени перехода или анимации, а также частоты звука. Тем не менее, она позволяет смешивать типы значений — это мощная идея в CSS.

Рассмотрим макет сайта содержащего два плавающих элемента. Вы хотите чтобы оба элемента были одинаковой ширины и разделены между собой горизонтальным margin в 60px. Звучит просто? Не проблема в фиксированном дизайне; если страница имеет ширину 960px, то оба элемента будут шириной 450px.

Как насчёт резинового или адаптивного макета? Нет возможности определить ширину страницы, поэтому большинство разработчиков установили бы ширину каждого элемента, скажем, как 45%. Отступ 10% будет равен 60px при ширине страницы 600px; увеличение или сужение окна браузера, соответственно, станет увеличивать или сокращать margin.

К счастью, новая функция calc() позволяет нам вычислять ширину. В нашем случае мы хотим, чтобы ширина каждого элемента составляла 50% минус 30px.

#element1, #element2 { float: left; width: calc(50% - 30px); } 
#element2 { margin-left: 60px; }

Возможно вы желаете отступ, связанный с размером шрифта, вроде 4em? Не проблема.

#element1, #element2 { width: calc(50% - 2em); } 

Или вы хотите рамку в 2px вокруг каждого элемента.

#element1, #element2 { width: calc(50% - 2em - 4px); border: 2px solid #000; }

Я рекомендую делать простые расчёты, но допустимо использовать и сложные формулы, например.

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

Поддержка браузеров

Функция calc() относится к рекомендациям W3C, теперь угадайте, какой браузер имеет встроенную поддержку?

Не угадали. На момент написания статьи это Internet Explorer 9. Firefox также поддерживает с префиксом: -moz-calc(). Так и не реализовано в webkit (Chrome и Safari) и Opera, но из-за полезности, полагаю, нам не придётся долго ждать (уже реализовано — прим. пер.).

К счастью, в своих стилях вы можете использовать прогрессивное улучшение.

#element1, #element2 { 
  width: 45%; /* все браузеры */
  width: -moz-calc(50% - 30px); /* Firefox 4+ */
  width: calc(50% - 30px); /* IE9+ и будущие браузеры */ 
}

min() и max()

Если вам понравился calc(), вы полюбите функции min() и max(). Они принимают два и более значений, разделенных запятыми, и возвращают, соответственно, минимум или максимум, например.

#myelement { width: max(300px, 30%, 30em); font-size: min(10px, 0.6em); }

Функции будут особенно полезны при использовании относительного размера шрифта текста, чтобы он не стал слишком большим или маленьким.

К сожалению, min() и max() не поддерживаются ни одним из последних браузеров. Будем надеяться, они скоро это сделают.