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

Резюме

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

Синтаксис

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

Значения

expression
математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:
+
Сложение
-
Вычитание.
*
Умножение. По крайней мере хоть один из сомножителей должен быть <number>.
/
Деление. Делитель должен быть  <number>.

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

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

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

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">This is a banner!</div>

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

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

Let's look at some 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. Следующий HTML-код использует этот CSS:

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

Specifications

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

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 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
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support <= 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) ? ? ?

See also

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

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