A criação de um layout CSS legal começa com a atribuição de tamanhos para tudo o que é colocado em um aplicativo da Web. Um recurso muito solicitado sempre foi a capacidade de especificar tamanhos usando uma mistura de unidades de dimensionamento. Por exemplo, seria bom reservar 50% de uma área mais uma quantidade fixa de espaço, digamos 10 px. 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, para posicionar coisas ou em valores de cor rgb(). Ele tem muitos usos 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 folha de estilo.
Ele oferece dois recursos principais para tornar o layout mais flexível:
- Misturar porcentagens e valores absolutos.
- Misturar unidades de dimensionamento.
Como misturar porcentagens com unidades absolutas
Vamos conferir um exemplo de como misturar porcentagens com unidades absolutas. Digamos que queremos alocar 50% da área disponível menos uma quantidade fixa de pixels. Podemos escrever isso assim:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Se tivesse uma cor de plano de fundo verde, seria assim:
Se você encolher o tamanho principal, ele vai ficar assim:
O bom é que sempre sabemos que a borda direita do conteúdo vai estar 100 px à esquerda do meio da área de contenção. A capacidade de combinar diferentes tipos de valor permite que o aplicativo da Web processe layouts em dispositivos de tamanhos diferentes com muito mais controle do que antes.
Unidades de mistura
Outra coisa legal é a capacidade de combinar unidades com medidas diferentes para chegar a um tamanho. Por exemplo, é possível definir tamanhos relativos ao tamanho da fonte atual misturando unidades "em" e "px".
#bar {
height: calc(10em + 3px);
}
Confira alguns exemplos de como combinar valores aqui e aqui.
Faça um teste
Com calc(), você pode usar +, -, * e / para somar, subtrair, multiplicar e dividir valores, permitindo todos os tipos de possibilidades. É possível usar calc() em qualquer lugar em que um comprimento ou número do CSS possa ser usado. Também estamos trabalhando para adicionar calc() para propriedades de ângulo e frequência em breve. A propriedade calc() para comprimentos está disponível no Chrome 19 (build do Canal de desenvolvedor) usando a 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 sua opinião nos comentários abaixo.