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.
|
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 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.
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:
|
1 2 3 |
.slide { height: 100vh; } |
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:
|
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 é 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.
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:
|
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!