Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
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 могут быть различными выражениями длины. Вы можете использовать единицы измерения для каждого из операндов, если пожелаете. Вы также можете использовать скобки, чтобы указать порядок вычисления.
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) | ? | ? | ? |