A expressão de propriedade CSS calc()nos permite realizar cálculos simples em nossas folhas de estilo.
Fundamentos
Aqui está um conjunto de regras demonstrando o uso de CSS calc():
.container { height: calc(100% – 50px); width: calc(100% – 40px); }
Como você pode ver no exemplo acima, a calc()expressão de propriedade CSS nos permite calcular dinamicamente o resultado entre a subtração de dois valores de comprimento CSS diretamente em nossa folha de estilo sem usar JavaScript, e mesmo que os valores de comprimento não compartilhem a mesma unidade.
Só podemos realizar cálculos aritméticos com CSS calc():
- Adição ( +)
- Subtração ( -)
- Multiplicação ( *)
- Divisão ( /)
CSS calc()funciona em muitos tipos de valores numéricos de CSS:
- Comprimento
- Tempo
- Ângulo
- Frequência
- Inteiros e números sem unidade
CSS calc()não pode operar em valores de cores CSS e outros tipos de valores CSS.
Caso de uso
O valor de CSS calc()pode ser visto rapidamente quando estamos realizando cálculos matemáticos em valores numéricos com diferentes unidades de CSS. Torna-se ainda mais útil quando os valores são uma mistura de unidades relativas e fixas.
Primeiro, vamos falar sobre uma instância em que não devemos usar a calc()expressão de propriedade.
Contra-exemplo
/* Do not do this! */ div { width: calc(600px / 2); }
Na regra de estilo acima, estamos realizando um cálculo que podemos fazer facilmente por conta própria.
Para que nosso CSS seja mais legível e para evitar cálculos desnecessários do navegador que podem tornar nossas páginas da web mais lentas, é melhor pegarmos uma calculadora real e fazermos as contas nós mesmos:
div{ width: 300px; }
Onde usar CSS calc()
CSS calc()torna-se um grande trunfo quando uma das unidades é uma unidade relativa enquanto a outra é uma unidade fixa. Essa capacidade de negociar entre diferentes unidades CSS é especialmente maravilhosa em designs de web responsivos.
Aqui está um exemplo de um contêiner centralizado que sempre terá margens de 20px à esquerda e à direita, independentemente do tamanho da tela:
.container { margin: 0 auto; width: calc(100% – 40px); }
Neste caso de uso de CSS calc(), somos capazes de contabilizar uma barra de rolagem vertical e garantir o conforto da legibilidade do nosso conteúdo, independentemente do dispositivo que está sendo usado. E esse método de centralizar um contêiner fluido requer apenas CSS e HTML mínimos.
Outras técnicas de design responsivo para obter o mesmo resultado exigem mais código e podem envolver coisas como margens negativas, consultas de mídia e aninhamento estranho de elementos de contêiner HTML.
Status das especificações
As especificações para CSS calc()estão descritas em Valores e Unidades de CSS do W3C Módulo 3 . No momento da redação deste artigo, este módulo está no status W3C Candidate Recommendation (CR), o que significa que está a dois níveis de ser finalizado.
Tenha em mente que, neste momento, CSS calc()é um dos três recursos CSS destacados nas especificações do módulo como estando em risco de serem descartados. É o que diz o CR:
Os seguintes recursos estão em risco e podem ser descartados durante o período de CR: ‘calc()’ , ‘toggle()’, ‘attr()’.
Suporte ao navegador
Atualmente, o CSS calc()é suportado em cerca de 82% dos navegadores usados na Web, segundo dados do caniuse.com.
O Internet Explorer 9 tem suporte parcial de CSS calc()e as versões subsequentes do navegador têm suporte completo aos recursos.