[PT-BR] Unidades de Viewport no CSS: Além do VH

Bom, este texto parte de um deslumbrado que acabou de descobrir uma coisa e quer contar pra todo mundo, ate algumas horas atras eu nao sabia que existiam outras unidades de viewport alem de vh/vw, e como eu percebi isso? Tendo problemas de responsividade pra resolver e indo atras de soluções, acontece que eu implementei um modal que deve ocupar 100% da altura da pagina, então '100vh' funcionou muito bem…no desktop, o problema apareceu de verdade quando eu testei usando um dispositivo mobile, aqui abaixo eu explico o problema e como eu resolvi.

Neste artigo vou tentar falar um pouco das novas unidades de viewports CSS: svh, svh, dvh. Mas antes, vamos tentar entender algumas coisas antes de nos aprofundarmos.

O que é Viewport ?

Resumidamente, viewport é a area visível de uma pagina web em um dispositivo, obviamente o tamanho do viewport varia de acordo com o dispositivo, com o browser e pode ate ser alterado pelo usuario se ele redimensionar a janela do navegador.

VH — Viewport Height

O “VH” foi introduzido no modulo 3 do CSS e é uma unidade relativa do CSS, ele permite que os elementos da pagina sejam dimensionados de acordo com o tamanho da tela, criando um layout responsivo, sendo assim, o ‘vh’ representa uma porcentagem da altura do viewport.

1vh = 1% da altura do viewport.

.foo {
height: 50vh;  /* O elemento terá 50% da altura do viewport */
}

Problemas do VH

Bom, o ‘vh’ trouxe muitas melhorias, mas para desktops, ja nos dispositivos mobile, tivemos alguns problemas, pois alguns navegadores tinham a barra de navegação que ocupa um espaço da tela, e geralmente essa barra fica por cima do conteúdo da pagina, podendo dinamicamente expandir ou retrair de acordo com a direção que o usuário “scrolla” a página, por isso, o ‘vh’ pode ter comportamento inesperado em alguns dispositivos.

Por causa desses problemas, a comunidade discutiu e chegou em algumas soluções:

SVH — Small Viewport Height

O ‘svh’ é definido considerando o tamanho do viewport quando a barra de navegação (ou outros itens do navegador) esta expandida, ou seja, quando o navegador ocupa o máximo de espaço possível o conteúdo da pagina sera o menor possível.

Como no exemplo abaixo, ‘100svh’ irá ocupar o espaço da tela considerando a barra de navegação expandida, sem “sobrar” conteúdo por baixo da barra.

.container {
    height: 100svh; /* O elemento terá a altura do viewport considerando a UI expandida */
}

Quando usar:
Quando desejar garantir que o conteúdo não será coberto pela UI do navegador.

Quando evitar:
Se a UI do navegador estiver retraída, pois pode haver espaço em branco extra.

LVH — Large Viewport Units

Ja o ‘lvh’ podemos dizer que é o contrario do ‘svh’, ele é definido considerando o tamanho do viewport quando a barra de navegação ou outros itens do navegador estão retraídos, sendo assim, quando o navegador ocupa o minimo de espaço possível, o conteúdo da página será o maior possível, praticamente o ‘lvh’ age de forma semelhante ao ‘vh’.

.container {
    height: 100lvh; /* O elemento terá a altura do viewport considerando a UI retraída */
}

Quando usar:
Para maximizar o espaço de conteúdo quando a UI do navegador estiver retraída.

Quando evitar:
Se a UI do navegador estiver expandida, pois o conteúdo pode ser coberto.

DVH — Dynamic Viewport Units

O Dinamyc Viewport, como o nome ja diz, é dinâmico, ele adapta/ajusta automaticamente o tamanho do conteúdo de acordo com a UI do navegador, seja expandida ou retraída, apesar disso parecer perfeito, é necessário estar atento, pois usar ‘dvh’ pode causar redimensionamento de conteúdo quando o usuario scrolla a pagina, oque pode causar incomodo e uma UX ruim, além de poder ser custoso em termos de performance.

.container {
    height: 100dvh; /* A altura do elemento se ajustará dinamicamente com a UI do navegador */
}

Quando usar:
Quando desejar um ajuste dinâmico da altura conforme a UI do navegador muda.

Quando evitar:
Se o redimensionamento dinâmico puder distrair o usuário ou afetar negativamente a experiência do usuário.

Veja este exemplo no CodePen ViewPorts examples