Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

calc() - это функция CSS, которая даёт возможность расчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы <length>, <frequency>, <angle>, <time>, <number>, или <integer>.

/* property: calc(expression) */ 
width: calc(100% - 80px); 

Синтаксис

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

+
Сложение
-
Вычитание.
*
Умножение. По крайней мере хоть один из сомножителей должен быть <number>.
/
Деление. Делитель должен быть  <number>.

Операнды в expression могут быть различными выражениями <length>. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
Note: Операторы + и - всегда должны быть по обеим сторонам отеделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длинны в пикселях.
Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.

Формальный синтаксис

calc(expression)

Примеры

Позиционирование объекта в окне с помощью отступа

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. 

.banner {
  position: absolute;
  left: 5%;                 /* для браузеров не поддерживающих calc() */
  left: calc(40px);     
  width: 90%;               /* для браузеров не поддерживающих calc() */
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
<div class="banner">Это баннер!</div>

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

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

Давайте посмотрим некоторый код CSS:

input {
  padding: 2px;
  display: block;
  width: 98%;               /* для браузеров, не поддерживающих calc() */
  width: calc(100% - 1em);
}

#formbox {
  width: 130px;             /* для браузеров, не поддерживающих calc() */
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следущему HTML-коду:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

Спецификации

Спецификация Статус Замечания
CSS Values and Units Module Level 3
Определение 'calc()' в этой спецификации.
Кандидат в рекомендации  

Поддержка браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Функция Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 19 (WebKit 536.3) -webkit
26
4.0 (2) -moz
16 (16)
9 - 6 -webkit (buggy)
7
On gradients' color stops 19 (WebKit 536.3) -webkit
27 (maybe 26)
19 (19) 9 - 6 -webkit (buggy)
7
Функция Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка <= 2.3.6 not supported 4.0 (2) -moz
16.0 (16)
? ? <= IOs 6.1.3 not supported
6 -webkit
7
On gradients' color stops ? 19.0 (19) ? ? ?

Смотрите также

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: mzelensky, coolder, AlKach, Landlord, alpha-kappa, trubenko, mrstork, prayash, teoli, UmanShield, ukarim
Обновлялась последний раз: mzelensky,