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

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">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()' в этой спецификации.
Кандидат в рекомендации  

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

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!

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

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

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