Banner propaganda da DevMedia - Cursos de desenvolvimento web

A função calc() das CSS

visualizações desde a atualização em 08/07/2015 Publicado em: 28/08/2012 | Atualizado em: 08/07/2015

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:

seletor { propriedade: calc(expressão matemática); }

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

HTML
<div></div>
CSS
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

HTML
<section id="container">
    <div class="um"></div>
    <div class="dois"></div>
</section>
CSS
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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo