calc()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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>
, <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
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. 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, 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
Specification |
---|
CSS Values and Units Module Level 4 # calc-func |
Compatibilidade com navegadores
BCD tables only load in the browser