CSS3 - calc()

No CSS3 temos um módulo que se chama "CSS Values and Units Module Level 3", este módulo tem o intuito de descrever os valores e unidades que as propriedades do CSS aceita.


Entre outras novidades ou nem tão novidades pois este módulo já existe desde Agosto/2012, criou-se três funções CSS destinadas a definir valores CSS. São elas: attr(), calc() e toggle().

Neste Post/Vídeo veremos a função calc(), que é suportada nas versões mais novas dos navegadores.

Para que serve?
Permite que sejam definidos valores que são resultados de uma expressão matemáticas.

Quais operadores são válidos?
+ (soma)
- (subtração)
* (multiplicação)
/ (divisão)

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

Exemplo:
Certo: calc(100% - 200px)
Errado: calc(100%-200px)

OBS: Nas expressões matemática as unidades CSS são aceitas para: ângulo, frequência, tempo, comprimento, números inteiros e fracionários, nas expressões é possível utilizar diferentes unidades de medida, lembre sempre de deixar espaços em branco entre os valores e os operadores.