Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch

Conheças as unidades de CSS moderno (rem, vh, vw, vmin, vmax, ex, ch) e saiba como e quando aplicá-las no CSS ao criar sites.

Ir para o artigo

Ao fazer um site, é fácil ficarmos presos quando trabalhamos com técnicas CSS que conhecemos bem, inclusive, unidades CSS. Mas isso nos coloca em desvantagem quando novos problemas vem à tona. À medida que a web evolui, a procura por novas soluções segue o mesmo caminho.

Então, web designers e desenvolvedores front end não têm escolha: é preciso conhecer bem o conjunto de ferramentas e possibilidades disponíveis para criar sites. Isso significa conhecer, inclusive, as ferramentas “especiais”, as que não são utilizados tão frequentemente, mas, quando necessárias, mostram-se as ferramentas certas para tarefas particulares da criação de sites.

Algumas dessas “ferramentas” CSS são cada uma das unidades de medida existentes. Já estamos habituados com px e em, mas existam outras mais para usar na hora de criar CSS. É hora de conhecer unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex e ch!

rem

Começando com algo similar ao que a maioria já conhecemos, a unidade em é definida como o font-size atual. Assim, por exemplo, se se definir um tamanho de fonte no elemento <body>, o valor de em de qualquer elemento-filho dentro de <body> será igual àquele tamanho de fonte.

A div terá um font-size de 1.2em, Isto é, 1,2 vezes o tamanho da fonte que herdou — neste caso, 14px. O resultado é 16.8px.

Entretanto, o que acontece quando se tem um elemento com valor em dentro de outro elemento com valor em? No trecho a seguir, foi aplicado o mesmo CSS acima; cada div herda a font-size de seu elemento-pai, permitindo aumentar gradualmente os tamanhos de fonte.

See the Pen Cascading em Values by snaptin (@snaptin) on CodePen.

Embora isso possa ser desejado em alguns casos ao criar CSS, muitas vezes é possível simplesmente confiar em uma única métrica para o dimensionamento. Neste caso, usa-se rem (o “r” significa “root”: “root em”), que é igual ao tamanho da fonte fixada ao elemento-raiz (quase sempre <html>).

Em qualquer uma das divs aninhadas do exemplo anterior de codigo CSS, a fonte terá o tamanho equivalente de 16.8px.

rem é bom para grids

rem não é útil apenas para dimensionamento de fontes. Por exemplo, é possível basear um sistema de grids inteiro ou uma biblioteca de estilos tomando por base o tamanho de fonte do elemento raiz <html> usando em, utilizando em para escalar em locais específicos.

Isto confere um dimensionamento de fonte mais previsível e escalável ao criar CSS para fazer um site.

vh e vw

Muitas técnicas de web design responsivo dependem muito de regras percentuais. No entanto, medidas CSS percentuais nem sempre são a melhor solução para todos os problemas. width em CSS é relativo ao elemento-ancestal mais próximo.

Mas e se fosse preciso usar a largura ou a altura da viewport ao invés da largura do elemento-pai? Isso é exatamente o que as unidades vh e vw proporcionam com CSS.

A medida vh é igual a 1/100 da altura da viewport. Então, por exemplo, se a altura do navegador é 900px, 1vh equivale a 9px e, analogamente, se a largura da viewport é 750px, 1vw equivale a 7.5px.

Há infinitas possibilidades de uso com essas unidades de CSS moderno em uma folha de estilos. Por exemplo, um slider de altura total (full-height) poderia ser conseguido com uma única linha de CSS:

Imagine que seja preciso de um título que preencha a largura da tela. Como fazer CSS para isso? Para conseguir, é possível definir um tamanho de fonte com vw, que vai escalar segundo a largura do navegador.

See the Pen Demo of vw Unit by snaptin (@snaptin) on CodePen.

vmin e vmax

Enquanto vh e vw estão sempre relacionados com a altura e largura da viewport, respectivamente as unidades de CSS moderno vmin e vmax estão relacionados com o valor máximo e mínimo destas larguras e alturas, dependendo de qual é a menor e a maior.

Por exemplo, se o navegador foi ajustado para 1100px de largura e a altura 700px, 1vmin seria 7px e 1vmax seria 11px. Contudo, se a largura foi ajustada para 800px e a altura definida para 1080px, vmin seria igual a 8px e vmax 10.8px.

Mas quando usar estes valores de medidas em códigos CSS para fazer um site?

Imagine que seja preciso um elemento sempre visível na tela. Usar uma altura e largura ajustada para um valor abaixo de 100vmin permitiria isso. Por exemplo, um elemento quadrado que sempre toca pelo menos 2 lados da tela pode ser definido assim:

Unidades de CSS moderno: ilustração mostrando o resultado da aplicação do código CSS anterior em um dispositivo móvel.

Se for preciso uma caixa quadrada que sempre cobre a viewport visível (tocando todos os 4 lados da tela o tempo todo), basta usar as mesmas regras com vmax.

Unidades de CSS moderno: ilustração mostrando o resultado da aplicação do código CSS anterior em um dispositivo móvel.

Combinações dessas regras fornecem maneiras muito flexíveis para utilizar o tamanho da viewport de maneiras novas e emocionantes em códigos de CSS! :-)

ex e ch

As unidades ex e ch, semelhante a em e rem, contam com a fonte e tamanho da fonte atuais. No entanto, ao contrário de em e rem, essas unidades também contam com font-family como são determinados com base em medidas específicas de cada fonte.

A unidade ch (“character unit” ou “unidade-caractere”) é definida como sendo a “medida avançada” da largura do caractere zero (“0”). Algumas considerações muito interessantes sobre o que isso significa podem ser encontradas no blog de Eric Meyers, mas o conceito básico é que, dada uma fonte com espaçamento uniforme, uma caixa com uma largura de “N” unidades-caractere, como width: 40ch;, sempre pode conter uma string com 40 caracteres nesta determinada fonte — enquanto usos convencionais de esta regra são relacionados a braille, as possibilidades de criatividade aqui certamente se estendem para além deste tipo de aplicação.

A unidade ex é definida como “a altura-x da fonte atual ou a metade de 1em”. A “altura-x” de uma determinada fonte é a altura do caractere “x” em minúsculo dessa fonte. Muitas vezes, trata-se da marca do meio da fonte.

altura-x: a altura do "x" minúsculo (leia mais em The Anatomy of Web Typography)
Altura-x: a altura do “x” minúsculo (leia mais em The Anatomy of Web Typography)

Há muitos usos para este tipo de unidade em código CSS, sendo a maioria relacionada a micro-ajustes tipográficos. Por exemplo, o elemento sup pode ser empurrado para cima na linha usando posição relativa e um valor inferior do 1ex. Similarmente, é possível puxar um elemento sub para baixo.

Os navegadores já têm seus padrões para estas tags, mas se um controle mais granular é preciso, você pode lidar com a situação de uma maneira mais explícita, como:

Conclusão sobre unidades de CSS moderno

Ficar atento sobre o desenvolvimento contínuo e expansão das CSS é extremamente importante para que você tenha ciência de todas as ferramentas e possibilidades disponíveis para fazer um site. Talvez você encontre um problema específico, que exija uma solução inesperada utilizando uma dessas unidades de medida menos conhecidas.

Não é sempre que essas unidades de CSS moderno serão usadas (certamente, quase nunca todas de uma vez), mas conhecer e saber quando aplicar rem, vh, vw, vmin, vmax, ex e ch abre uma gama de possibilidades e contingências possíveis para quaisquer situações que apareçam ao criar CSS.

E você, já passou por alguma situação ou teve que usar as unidades de CSS moderno para criar sites? Comente!

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS