É 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.
Hoje iremos introduzir algumas ferramentas “especiais” CSS que talvez você não conheça. Essas ferramentas são unidades de medida CSS, como o pixel e “ems“, porém é bem provável que você nunca tenha ouvido falar delas antes. Abaixo você pode conferir essas métricas.
A equipe da Turbosite compartilha esse artigo baseado no post do blog Desenvolvimento para Web.
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.
<body> <div class="test">Test</div></body>
body { font-size: 14px;} div { font-size: 1.2em; // calculado como 14px * 1.2, ou 16.8px}
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.
<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>
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>). Em qualquer uma das divs aninhadas do exemplo anterior, a fonte terá o tamanho equivalente de 16.8px.
html { font-size: 14px;} div { font-size: 1.2rem;} 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:
.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.
vmin e vmax
Enquanto vh e vm 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 seria11px. 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:
.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.
.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!
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:
sup { bottom: 1ex; position: relative;} sub { bottom: -1ex; position: relative;}
Conclusão
Manter um foco no contínuo desenvolvimento e expansão do CSS é extremamente importante para que você possa conhecer todas as ferramentas. Talvez você encontrará alguns problemas em particular, que exija uma solução inesperada, utilizando umas dessas unidades de medidas menos conhecida. Tire algum tempo para ler novas especificações. Se inscreva em comunidade de notícias e updates com grandes recursos.
Não é sempre que você usará estas unidades de CSS moderno, 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.