Melhores de 2012 – Você conhece a função calc() das CSS3?

O que tivemos de mais interesse em 2012? Quais foram melhores artigos, as opiniões que geraram maiores discussões? Isso é o que você vai encontrar nessa seleção de artigos que fizemos especialmente para você: os melhores conteúdos de 2012. Já que final e início de ano é sempre um tempo propício para fazer um balanço do que passou e o planejamento para o que ainda virá, esperamos que os artigos publicados aqui te ajudem nisso!

Boas festas e feliz 2013! Um abraço da equipe de Redação do iMasters!

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.

Continue lendo para ver dois exemplos práticos de uso dessa função