A função calc() das CSS

Introdução

O Módulo das CSS3 denominado "CSS Values and Units Module Level 3" atingiu, em 28 de agosto de 2012, o status de Candidato a Recomendação. Esse módulo destina-se a descrever os valores e unidades aceitas pelas propriedades CSS, bem como a sintaxe usada para definir tais valores.

O módulo, entre outras novidades, criou três funções CSS destinadas a definir valores CSS. São elas: attr(), calc() e toggle(). Nessa matéria estudaremos a função CSS calc() que é muito bem suportada em navegadores modernos. Ver caniuse (abre em nova janela).

Expressões matemáticas

A função calc() permite que se definam valores CSS com uso de expressões matemáticas, ou seja, o valor adotado para a propriedade é o resultado de uma expressão matemática.

Os operadores matemáticos válidos são: + (soma), - (subtração), * (multiplicação) e / (divisão). As unidades de medida CSS válidas na expressão matemática são as unidades CSS para: comprimento, ângulo, tempo, frequência e números inteiros e fracionários.

Na expressão matemática que define o valor CSS é permitido que se misture diferentes unidades de medida. A sintaxe geral para uso desta função é conforme mostrada a seguir:

Regras sintáticas para as expressões matemáticas

• É válido usar-se unidades de comprimento diferentes para os valores que compõem a expressão matemática.
  Por exemplo: calc(50% + 5em - 255px / 2)
• Os operadores + (soma) e - (subtração) devem obrigatoriamente conter um espaço em branco antes e depois:
  Errado: calc(50%+5em)
  Certo: calc(50% + 5em)
• Para os operadores * (multiplicação) e / (divisão) deixar um espaço em branco antes e depois não é obrigatório, mas aconselhável para melhorar legibilidade:
  Certo: calc(50% + 3em*5)
  Melhor: calc(50% + 3em * 5)
• É válido o uso de parênteses para alterar a ordem dos cálculos tal como se faz em expressões matemáticas:
  Exemplo: calc(200px + (50% - 8rem) / 3)

Exemplos de uso da função calc()

Exemplo 1

<div></div>

body {
 margin: 0;
 padding: 0;
}
div {
 width: 90%; /* para navegadores que não suportam calc() */
 width: calc(100% - 100px); /* para suporte nativo */
 margin: 0 auto;
 height: 200px;
 border: 1px solid black ;
 background: lime;
}

Nesse exemplo centramos um elemento div na tela e definimos sua largura total igual a largura total da viewport menos 100px resultando em um elemento elástico com margens esquerda e direita constantes e iguais a 50px.

Qualquer que seja a largura da tela as margens laterais de 50px permanecem inalteradas. Lembrar que definir a largura em porcentagem (por exemplo: 90%) sem uso de calc() como fazemos com as CSS2.1 e anteriores resulta em margens elásticas (no nosso exemplo: 5% para cada lado) e não fixas.

Veja a renderização desse exemplo em: Exemplo 1 (abre em nova janela).

Examine o código fonte da página e também redimensione a janela do navegador para observar as margens constantes. Em navegadores antigos que não suportam a função calc() a largura do elemento div será 90% com margens elásticas.

Exemplo 2

<section id="container">
    <div class="um"></div>
    <div class="dois"></div>
</section>

body {
  margin: 0;
  padding: 0;
}
#container {
  width: 90%;
  height: 300px;
  background: yellow;
}
div {
  width: 40%; /* para navegadores que não suportam calc() */ 
  width: calc(50% - 20px - 2em); /* para suporte nativo */
  margin: 0 10px;
  height: 200px;
  border: 1em solid black ;
  float: left;
  background: lime;
}
.dois {	
  float: right;
  background: red;
}

Nesse exemplo flutuamos, dentro de um container, dois elementos div para os quais definimos bordas e margens sendo que cada um dos elementos ocupa 50% da largura do container.

Para esse exemplo consideramos o Box Model tradicional das CSS e usamos a função calc() para ajustar a largura e margens dos elementos div dentro do container.

Veja a renderização desse exemplo em: Exemplo 2.

Examine o código fonte da página e também redimensione a janela do navegador para observar o comportamento dos elementos. Ao defininirmos a largura dos div em porcentagem e as margens em pixels, sem uso da função calc() não seria possível obter o efeito.

Compartilhe essa matéria com seus amigos