Tradicionalmente, a unidade de CSS px era usada para quase todas as medidas. Mas as coisas mudaram há tempos, e o web dev moderno conta com unidades de CSS moderno para os mais diversos casos de uso.
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 temos 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 específicas.
Algumas dessas “ferramentas” CSS são cada uma das unidades de medida CSS existentes. Já estamos habituados com px e em, mas existem 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.
|
1 2 3 |
<body> <div class="test">Teste</div> </body> |
|
1 2 3 4 5 6 7 |
body { font-size: 14px; } div { font-size: 1.2em; /* calculado como 14px * 1.2, ou 16.8px */ } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div> Teste <!-- 14 * 1.2 = 16.8px --> <div> Teste <!-- 16.8 * 1.2 = 20.16px --> <div> Teste <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body> |
Demonstração funcional:
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>).
|
1 2 3 4 5 6 7 |
html { font-size: 14px; } div { font-size: 1.2rem; } |
Em qualquer uma das divs aninhadas do exemplo anterior de codigo CSS, a fonte terá o tamanho equivalente de 16.8px.
A menos que seja alterado, o valor padrão de rem é 16px, com a vantagem de responder a alterações no nível de zoom.
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 no tamanho de fonte do elemento raiz <html> usando em para escalar em locais específicos.
Isto confere um dimensionamento de fonte mais previsível e escalável.
rem não mudará, não importa o quão profundamente esteja aninhado, portanto, para espaçamento consistente entre/ao redor de elementos, também é uma escolha confiável.
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.
As unidades vh e vw são úteis quando é preciso usar a largura ou a altura da viewport.
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:
|
1 2 3 |
.slide { height: 100vh; } |
Imagine que seja preciso um título que preencha a largura da tela. Como seria um 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.
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 unidades de medida CSS em um site/app?
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:
|
1 2 3 4 |
.box { height: 100vmin; width: 100vmin; } |
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.
|
1 2 3 4 |
.box { height: 100vmax; width: 100vmax; } |
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 é:
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.
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.
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 for preciso, é possível lidar com a situação de uma maneira mais explícita, como:
|
1 2 3 4 5 6 7 8 9 |
sup { bottom: 1ex; position: relative; } sub { bottom: -1ex; position: relative; } |
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!