A criação de um bom layout de CSS começa com a atribuição de tamanhos para tudo que está sendo colocado em um aplicativo da Web. Um recurso muito solicitado sempre foi a capacidade de especificar tamanhos usando uma combinação de unidades de dimensionamento. Por exemplo, seria bom poder reservar 50% de uma área mais uma quantidade fixa de espaço, digamos 10px. Você pode fazer isso agora mesmo usando a propriedade calc(). Você pode usar esse recurso em qualquer lugar em que um comprimento ou número seja usado. Assim, ele pode ser usado para posicionar itens ou também em valores de cor rgb(), para que ele tenha muitos usos excelentes em uma folha de estilo.
O que você pode fazer com calc()?
A propriedade calc() pode ser usada em qualquer lugar em que haja um comprimento ou número de CSS na sua folha de estilo.
Ele oferece dois recursos principais para tornar o layout mais flexível:
- Mistura de porcentagens e valores absolutos.
- Misturando unidades de dimensionamento.
Misturando porcentagens com unidades absolutas
Vejamos um exemplo de combinação de porcentagens com unidades absolutas. Digamos que queremos alocar 50% da área disponível, menos uma quantidade fixa de pixels, e poderíamos escrever da seguinte forma:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Se tivesse uma cor de fundo verde, teria esta aparência:
Se você reduzir o tamanho pai, ele vai ficar assim:
O bom aqui é que sempre sabemos que a borda direita do conteúdo estará 100px à esquerda do meio da área que contém o conteúdo. A capacidade de combinar diferentes tipos de valor dessa maneira permite que seu aplicativo da web lide com o layout em dispositivos de diferentes tamanhos com muito mais controle do que antes.
Mescla de unidades
Outra ótima coisa é a capacidade de combinar unidades com medidas diferentes para obter um tamanho resultante. Por exemplo, você pode definir tamanhos relativos ao tamanho da fonte atual, misturando as unidades "em" e "px".
#bar {
height: calc(10em + 3px);
}
Confira alguns ótimos exemplos de combinação de valores aqui e aqui.
Testar
Com calc(), você pode usar +, -, * e / para adicionar, subtrair, multiplicar e dividir valores, oferecendo todos os tipos de possibilidades. Você pode usar calc() em qualquer lugar em que um comprimento ou número CSS possa ser usado. Em breve, também estamos trabalhando para adicionar calc() para propriedades de ângulo e frequência. A propriedade calc() para comprimentos está disponível agora no Chrome 19 (build do canal de desenvolvimento) pelo uso da propriedade -webkit-calc, no Firefox desde a versão 8, usando a propriedade -moz-calc, e no Internet Explorer desde a versão 9 sem prefixo. Deixe um comentário abaixo e dê sua opinião.