É fácil ficar preso quando se trabalha com técnicas CSS que conhecemos bem, mas isso nos coloca em desvantagem quando novos problemas vem à tona. À medida que a web continua a crescer, a procura por novas soluções segue o mesmo caminho. Portanto, web designers e desenvolvedores de front-end não têm escolha: é preciso conhecer bem o conjunto de ferramentas e possibilidades disponíveis. Isso significa conhecer, inclusive, as ferramentas “especiais”, as que não são utilizados tão frequentemente, mas, quando necessárias, mostram-se a ferramenta certa para a tarefa em questão.
Algumas dessas “ferramentas” CSS são cada uma das unidades de medida existentes. Algumas você já está habituado, como pixels ou ems, mas talvez existam outras que você ainda não esteja familiarizado. Então, é tempo de conhecer unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch.
rem
Começando com algo similar ao que a maioria já conhece, a unidade em é definida como o font-size atual. Assim, por exemplo, se você 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">Test</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> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body> |
See the Pen Cascading em Values by snaptin (@snaptin) on CodePen.
Embora isso possa ser desejado em alguns casos, muitas vezes você pode querer simplesmente confiar em uma única métrica para o dimensionamento. Neste caso, você deve usar 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, 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.
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 você quisesse 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.
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. Por exemplo, “sliders” de altura total (full-height) poderia ser conseguido com uma única linha de CSS:
|
1 2 3 |
.slide { height: 100vh; } |
Imagine que você precise de um título que preencha a largura da tela. Para conseguir isso, você pode 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 vmin e vmax estão relacionados com o valor máximo ou 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?
Imagine que você precise de 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 dois lados da tela pode ser definido assim:
|
1 2 3 4 |
.box { height: 100vmin; width: 100vmin; } |
Se você precisa de uma caixa quadrada que sempre cobre a viewport visível (tocando todos os quatro lados da tela o tempo todo), use as mesmas regras com vmax.
|
1 2 3 4 |
.box { height: 100vmax; width: 100vmax; } |
Combinações dessas regras fornecem uma maneira muito flexível de utilizar o tamanho da viewport de maneiras novas e emocionantes! o/
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 é de 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 da minúscula “x” dessa fonte. Muitas vezes, trata-se da marca do meio da fonte.
Há muitos usos para este tipo de unidade, 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:
|
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. 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 você usará estas unidades de CSS moderno — e, certamente, quase nunca usará todas de uma vez (até mesmo pelo atual suporte dos navegadores a estas unidades de medida) –, mas conhecer e saber quando aplicar rem, vh, vw, vmin, vmax, ex e ch abre a gama de possibilidades e contingências possíveis para quaisquer situações que apareçam.