calc()
A função calc()
CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como <length>
(en-US), <frequency>
(en-US), <angle>
(en-US), <time>
, <percentage>
(en-US), <number>
, e <integer>
(en-US) é 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>
(en-US). 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( <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> (en-US) |
<percentage> (en-US) |
<calc-constant> |
( <calc-sum> )
<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN
Exemplos
Posicionando um objeto na tela usando margin
calc()
torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:
.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>
Dimensionar campos de formulário automaticamente para caber em seu contêiner
Outro caso para calc()
é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.
Veja-mos no CSS:
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos calc()
novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:
<form>
<div id="formbox">
<label>Type something:</label>
<input type="text">
</div>
</form>
calc( ) inserido em variáveis de CSS
Você também pode utilizar calc()
com variáveis de CSS (en-US). Considere o seguinte código:
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
Depois que todas as variáveis forem expandidas, o valor de widthC
será calc( calc( 100px / 2) / 2)
, então quando for atribuído à propriedade de largura .foo
, todos os calc()
internos (não importa o quão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade width
será eventualmente calc( ( 100px / 2) / 2)
, i.e. 25px
. Resumindo: um calc()
dentro de um calc()
é idêntico à parênteses.
Questões de acessibilidade
Quando calc()
é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma unidade de comprimento relativo (en-US), por exemplo:
h1 {
font-size: calc(1.5rem + 3vw);
}
Isso garante que o tamanho do texto será redimensionado se a página for ampliada.
Especificações
Especificação | Status | Comentário |
---|---|---|
CSS Values and Units Module Level 3 The definition of 'calc()' in that specification. |
Candidata a Recomendação | Definição inicial |
Compatibilidade com navegadores
BCD tables only load in the browser