Одной их наиболее ожидаемых функций для верстальщиков в CSS3 является  функция calc(). На данный момент она поддерживается не только Firefox (начиная с 4 версии), но и Internet Explorer 9, и теперь, я думаю, что настало время для краткого обзора о том, как полезна может быть эта функция.

Что такое calc()?
Функция calc() может использоваться для определения длинны. Например, вы можете использовать её для расчета значений границ, полей, отступов, шрифтов и т.д. Расчет ширины может быть очень сложным, особенно для "резинового" макета, функция calc() является уникальной, поскольку она позволяет сделать эти расчеты в CSS.

Она позволяет производить сложения ("+"), вычитание ("-"), умножения ("*") и деления ("/").

Давайте рассмотрим простой пример:

div {
 width: calc(100% - 20px);
}

Легко, не так ли? Вы также можете делать более одного расчета в пределах одной функции, например:

div {
 width: calc(100% - 20px + 2px*2);
}

В текущей спецификации, определено, что выражения умножения и деления имеют приоритет над сложением и вычитанием. Это означает, что в предыдущем примере выражение "2px * 2" будет рассчитано раньше двух других выражений. Кроме того, обратите внимание, что деление на ноль приведет к ошибке.

Спецификация еще не завершена (там есть Editor’s Draft версия, которая расширяет CSS3 Values and Units Working Draft версию), но это основное.

Один простой пример использования
Чтобы показать полезность calc() в будущем, я создал простой макет.

Макет состоит из основного контейнера содержания слева, боковой панели справа, и футера, который ниже двух предыдущих контейнеров. Вот основная разметка с частью текста, для краткости:

<div class="wrapper">
 
 <div id="main">
 <h1>Far far away…</h1>
 <p>Far far away, behind the word mountains…</p>
 </div>
 
 <div id="accessory">
 <ul>
 <li><a href="#">Far far away…</a></li>
 <li><a href="#">Separated they live…</a></li>
 <li><a href="#">A small river named…</a></li>
 </ul>
 </div>
 
 <div id="footer">
 Visit the article…
 </div>
 
</div>

Определим некоторые общие свойства для нашего макета:

body {
 background: #E8EADD;
 color: #3C323A;
 padding: 20px;
}

После этого, укажем, что ширина основного контейнера должна быть равна 100% минус 40px и выровнена по центру:

.wrapper {
 width: 1024px; /* это для старых браузеров, которые не поддерживают функцию calc() */
 width: -moz-calc(100% - 40px);
 width: calc(100% - 40px);
 margin: auto;
}

В CSS выше, я также добавил ширину для браузеров не поддерживающих функцию calc() , и функцию с префиксом для Firefox 4.

После этого я установлю границы, ширину и отступы для основного контейнера div, а также задам float:left для него:

#main {
 border: 8px solid #B8C172;
 float: left;
 margin-bottom: 20px;
 margin-right: 20px;
 padding: 20px;
 width: 704px; /* для старых браузеров, которые не поддерживают функцию calc() */
 width: -moz-calc(75% - 20px*2 - 8px*2);
 width: calc(75% - 20px*2 - 8px*2); }

Так что же происходит в этой функции calc()? Я хочу, чтобы мой контейнер div был шириной 75% (75% от его родительского контейнера, запомните), но из этих 75% мне нужно вычесть "20px * 2" для отступов с каждой стороны (padding: 20px), и "8px * 2" для границ на каждой стороне (border: 8px solid #B8C172).

Боковая панель я хочу чтобы занимала оставшиеся 25% внутри родительского контейнера, но это значение будет позволять отступы, границы для боковой панели (20px).

#accessory {
 border: 8px solid #B8C172;
 float: right;
 padding: 10px;
 width: 208px; /* для старых браузеров, которые не поддерживают функцию calc()  */
 width: -moz-calc(25% - 10px*2 - 8px*2 - 20px);
 width: calc(25% - 10px*2 - 8px*2 - 20px);
}

Разберем "calc(25% - 10px * 2 - 8px * 2 - 20px)", у нас есть оригинальные 25%, минус "10px * 2" для отступа с каждой стороны, минус "8px * 2" для границы с каждой стороны, минус "20px" для правого поля основного контейнера.

Футер - это просто div на всю ширину, я не буду утомлять всех, объясняя что это.

Так как боковая панель становится слишком узкой после определенного момента, если изменять размеры браузера, я также добавил простые media query, которые изменяют положение основного и бокового контейнеров и пересчитывают их ширину, чтобы они были на 100% ширины экрана, минус ширина их отступов и границ:

@media screen and (max-width: 768px) {
 #main, #accessory {
 float: none;
}
 #main {
 margin-right: 0;
 width: -moz-calc(100% - 20px*2 - 8px*2);
 width: calc(100% - 20px*2 - 8px*2);
}
 #accessory {
 width: -moz-calc(100% - 10px*2 - 8px*2);
 width: calc(100% - 10px*2 - 8px*2);
}
}

Это очень упрощенный вариант использования, но, надеюсь, этого достаточно, чтобы проявить ваш интерес к этой замечательной функции calc().

Поддержка браузеров
Функцию calc() поддерживает IE 9 и Firefox 4+ (который требует префикс -moz). Я понимаю, что недостаточная поддержка браузерами может быть гораздо большой проблемой, в сравнении, например, с недостаточной поддержкой браузерами таких вещей, как анимация. Так как неправильные измерения могут привести к поломке верстки веб-страницы.

Это не значит, что мы не должны пытаться пробовать использовать это. Если Firefox и IE, которые владеют большой долей рынка, уже сделали поддержку этой функции, я могу предположить, что и другие последуют этому примеру.

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему