O Módulo das CSS3 denominado “CSS Values and Units Module Level 3” atingiu, em 28 de agosto de 2012, o status de Candidata 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. São elas: attr(), calc() e toggle(). Nesse artigo estudaremos a função CSS calc().

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) e as unidades de medida CSS válidas no cálculo matemático são as unidades para: comprimento, ângulo, tempo, frequência e números.

O uso dessa função para definir valor CSS permite que se misture diferentes unidades de medida. Isso não é possível com uso das CSS2.1 e anteriores.

Vejamos a seguir dois exemplos práticos de uso dessa função:

Exemplo 1

HTML

<div></div>

CSS

body {
margin: 0;
padding: 0;
}

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

Nesse exemplo, centramos um elemento na tela e definimos sua largura total igual a dimensão total da tela menos 100px resultando em um elemento elástico com margens esquerda e direita constantes e iguais a 50px. Qualquer que seja a resolução da tela as margens laterais permanecem inalteradas. Lembrar que definir a largura em percentagem (por exemplo: 90%) sem uso de calc(), como fazemos com as CSS2.1 e anteriores, resulta em margens elásticas (no exemplo: 5% para cada lado) e não fixas.

Veja a renderização do exemplo mostrado no Exemplo 1. Examine o código fonte da página e também redimensione a janela do navegador para observar as margens constantes. Use navegador Chrome ou Firefox, que atualmente suportam essa funcionalidade com uso de prefixos proprietários. Em outros navegadores a largura do elemento será 90% com margens elásticas.

Exemplo 2

HTML

<section id="container">
<div></div>
<div></div>
</section>

CSS

body {
margin: 0;
padding: 0;
}
#container {
width: 90%;
height: 300px;
border: none;
background: yellow;
}
div {
width: -webkit-calc(50% - 20px - 2em);  /* para Chrome */
width: -moz-calc(50% - 20px - 2em);     /* para Firefox */
width: calc(50% - 20px - 2em);           /* para suporte nativo */
/* width: 50%; */
margin: 0 10px;
height: 200px;
border: 1em solid black ;
float: left;
background: lime;
}
.dois {
float: right;
background: red;
}

Nesse exemplo flutuamos dois elementos com bordas e margens, dentro de um container, cada um deles ocupando 50% da largura do container. Usamos a função calc() para ajustar os elementos no container.

Veja a renderização do exemplo mostrado 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. Use navegador Chrome ou Firefox, que atualmente suportam essa funcionalidade com uso de prefixos proprietários. Observe que sem uso da função calc() não seria possível obter o efeito. Nas declarações CSS para os elementos div descomente a declaração width: 50%, e observe a renderização.

***

Oferta exclusiva para os leitores iMasters deste artigo: todos os livros do Maujor com 25% de desconto no site da Novatec Editora! Insira o código promocional maujor25 no carrinho de compras para gerar o desconto. (Válido até 01/11/2012)