MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Функция calc()

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

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Резюме

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

Синтаксис

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

Значения

expression
математическое выражение, результат вычислния которого можно использовать как значение CSS свойства.

Операции

expression простое выражение составленое  из +, -, *, /   , с использованием стандартных правил приоритета операторов:

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

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

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

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

calc(expression)

Примеры

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

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

.banner {
  position: absolute;
  left: 5%;                 /* для браузеров не поддерживающих calc() */
  left: 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

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

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