Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A função  calc() CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualqur lugar , como  <length>, <frequency>, <angle>, <time>, <percentage><number>, e <integer> é permitido.

/* propriedade: calc(expressão) */
width: calc(100% - 80px);

Syntax

A função  calc() recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão operator precedence rules:

+
Adição.
-
Subtração.
*
Multiplicação. Pelo menos um dos argumentos deve ser um <number>.
/
Divisão. O operador da direita deve ser um <number>.

Os operandos na expressão podem ser qualquer valor de sintaxe <length>. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.

Notas

  • Divisão por 0 (zero) resulta em um erro gerado pelo HTML parser.
  • Os operadores + e - devem estar cercados por espaço em branco. Por exemplo, calc (50% -8px) será analisado como uma porcentagem seguida por um comprimento negativo - uma expressão inválida — enquanto calc (50% - 8px) é uma porcentagem seguida por um operador de subtração e um comprimento. Da mesma forma, calc (8px + -50%) é tratado como um comprimento seguido por um operador de adição e uma porcentagem negativa.
  • Os operadores * e / não requerem espaço em branco, mas adicioná-lo para consistência é permitido e recomendado.
  • Expressões matemáticas envolvendo porcentagens de larguras e alturas em colunas de tabela, grupos de coluna de tabela, linhas de tabela, grupos de linhas de tabela e células de tabela em tabelas de layout automáticas e fixas podem ser tratadas como se auto tivesse sido especificado.
  • É permitido aninhar funções calc (), em cujo caso as internas são tratadas como parênteses simples.

Formal syntax

calc( <calc-sum> )

where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Exemplos

Posicionando um objeto na tela usando margin

calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
<div class="banner">This is a banner!</div>

Automatically sizing form fields to fit their container

Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

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

Nested calc() with CSS Variables

You can also use calc() with CSS variables. Consider the following code:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

After all variables are expanded, widthC's value will be calc( calc( 100px / 2) / 2), then when it's assigned to .foo's width property, all inner calc()s (no matter how deeply nested) will be flattened to just parentheses, so the width property's value will be eventually calc( ( 100px / 2) / 2), i.e. 25px. In short: a calc() inside of a calc() is identical to just parentheses.

Accessibility concerns

When calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example:

h1 {
  font-size: calc(1.5rem + 3vw);
}

This ensures that text size will scale if the page is zoomed.

Specifications

Specification Status Comment
CSS Values and Units Module Level 3
The definition of 'calc()' in that specification.
Candidata a Recomendação Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<calc()>Chrome Full support 26
Full support 26
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
No support 4 — 53
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 9Opera Full support 15Safari Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 28Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
No support 4 — 53
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 14Safari iOS Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
<color> value supportChrome No support NoEdge No support NoFirefox Full support 59IE No support NoOpera No support NoSafari Full support 6WebView Android No support NoChrome Android No support NoFirefox Android Full support 59Opera Android No support NoSafari iOS Full support 6Samsung Internet Android No support No
Gradient color stops supportChrome Full support 19Edge Full support 12Firefox Full support 19IE Full support 9Opera Full support 15Safari Full support 6WebView Android Full support 37Chrome Android Full support 28Firefox Android Full support 19Opera Android ? Safari iOS Full support 6Samsung Internet Android ?
Nested calc() supportChrome Full support 51Edge Full support 16Firefox Full support 48IE No support NoOpera Full support 38Safari Full support 11WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 48Opera Android ? Safari iOS Full support 11Samsung Internet Android Full support 5.0
<number> value supportChrome Full support 31Edge Full support 12Firefox Full support 48IE Full support 9Opera Full support 18Safari Full support 6WebView Android Full support 4.4.3Chrome Android Full support 31Firefox Android Full support 48Opera Android Full support 18Safari iOS Full support 6Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: alexalannunes, oxesoft, mdnwebdocs-bot, rubensdemelo
Última atualização por: alexalannunes,