CSS com unidades de medida modernas

Os novos problemas que vem a tona fazem com quê o desenvolvimento web continue a crescer, e a procura por soluções segue o mesmo caminho; Nesse cenário, desenvolvedores e designers de front-end não possuem escolha, é necessário conhecer bem as ferramentas e as possibilidades disponíveis.

Uma das atualizações do CSS3 está nas unidades de medida existentes. Há inúmeras possibilidades e aplicações e agora é tempo de conhecer e trabalhar com as novas unidades, elas são:
rem, vh, vw, vmin, vmax, ex e ch.

em & rem

O rem é bastante similar à unidade em, que é definida como o font-size.
Caso seja definido um tamanho de fonte no elemento <body>, o valor de qualquer elemento filho será igual aquele tamanho de fonte.

Entretanto o que acontece quando se tem um elemento com valor em dentro de outro elemento em, ele herda o font-size do seu elemento pai, aumentando gradualmente o tamanho da fonte.

Embora isso possa ser desejado, muitas vezes é necessário utilizar uma única medida para o dimensionamento. Nesse caso deve ser utilizado o rem (o “r” significa “root”, ou seja “root em”), igual ao tamanho da fonte fixada no elemento raiz (quase sempre o <html>).

vh & vw

As técnicas de design responsivo dependem muito de regras percentuais. No entanto, medidas percentuais no CSS nem sempre são a melhor solução para todos os problemas de responsividade. O elemento width no CSS é relativo ao elemento ancestral mais próximo. Então, caso deseje utilizar a largura e altura do viewport estas unidades proporcionam isso.

A medida vh e vw são iguais a 1/100 da altura da viewport. Ou seja, se a largura/algura do navegar for 900px, 1vh equivale a 9px.

vmin & vmax

Enquanto o vh e vw estão relacionados com altura e largura do viewport, respectivamente vmin e vmax estão relacionados com os valores mínimos e máximos destas larguras e alturas. Contudo se a largura/altura do navegador são alteradas, elas são atualizadas.

As combinações dessas regras oferecem uma maneira extremamente flexível de utilizar de maneira moderna as unidades baseadas no tamanho do viewport.

ex & ch

As unidades ex e ch são semelhantes ao em e rem e contam com tamanho das fontes atuais. No entanto, ao contrário do em e rem, essas unidades também contam com o font-family, determinados com base na medida específica de cada fonte.

A unidade ch (character unit) é definida como sendo a medida avançada da largura do caractere zero (0). O conceito básico é que, dada uma fonte com espaçamento uniforme, uma caixa com uma largura “N”, como width: 40ch, sempre pode conter uma string com 40 caracteres independentemente do espaçamento da fonte.

A unidade ex é definida como a “a altura N da fonte atual, ou a metade de 1em“. Essa altura “N” de uma determinada fonte é a altura mínima “N” dessa própria fonte (trata-se da marca do meio da fonte).

Há muitas aplicações para esse tipo de unidade, sendo a maioria relacionada a micro-ajustes tipográficos, ou seja, em grosso modo é possível puxar um elemento para cima ou para baixo, de maneira granular e independente dos padrões adotados pelos navegadores.

Para concluir, é muito importante ficar atento sobre o desenvolvimento contínuo e expansão do CSS e também não será sempre que se deverá utilizar tais unidades citadas, porém elas podem resolver de maneira simples problemas específicos do cotidiano dos desenvolvedores.