svh, lvh e dvh: unidades de viewport do CSS, medidas no seu navegador

O que são as unidades de viewport

Uma unidade de viewport é uma porcentagem do viewport escrita como comprimento, então 100vh é a altura inteira e 50vw é metade da largura. O que quase ninguém percebe é quantas existem: vinte e quatro. Seis eixos — largura, altura, os dois eixos lógicos da direção da escrita, e a menor e a maior das duas — multiplicados por quatro ideias diferentes do que é o viewport.

Essas quatro são a parte interessante. O viewport pequeno é o espaço que você tem com toda interface retrátil do navegador aparecendo. O grande é o espaço com tudo isso recolhido. O dinâmico é o que for verdade neste instante. E a quarta é a família sem prefixo que você já usa, vh e vw, que não é uma quinta medida: ela é definida como sendo a mesma que a grande.

É por isso que as unidades chegam em conjunto: svh, lvh e dvh ao lado do vh simples, e o mesmo em cada eixo. Elas apareceram nos navegadores juntas, o que também explica por que um navegador antigo o bastante para não ter uma delas não tem nenhuma das três.

Como usar

1. Leia as quatro alturas. Elas são medidas no seu navegador quando a página carrega, fazendo o layout de um elemento em cada unidade e lendo quanto deu. Nada é consultado numa tabela, então os números descrevem o aparelho que você tem na mão.
2. Olhe a diferença. A linha abaixo é grande menos pequeno: a interface do navegador que some assim que você começa a rolar. Numa janela de desktop costuma ser zero, e é justamente por isso que esse problema fica invisível até alguém abrir a página no celular.
3. Role, num celular. A linha dinâmica muda conforme a barra se recolhe e volta, e os achados dizem em qual ponta ela está no momento. Esse movimento é a especificação funcionando como foi desenhada, e é também o motivo de as unidades dinâmicas não serem de graça.

100vh é o viewport alto, de propósito

O discurso universal é que 100vh é quebrado no celular: que os navegadores erram, que a barra de endereço estraga, que é preciso uma gambiarra em JavaScript. O discurso está invertido. A especificação do CSS define as unidades do viewport grande e as unidades sem prefixo contra o viewport grande: o viewport dimensionado como se qualquer interface que se expande e se recolhe estivesse recolhida. Ou seja, 100vh é 100lvh, de propósito, e sempre foi.

A especificação então enuncia a consequência no parágrafo seguinte, sem rodeios: quando esses elementos retráteis estão aparecendo, eles podem encobrir conteúdo dimensionado ou posicionado com essas unidades. Isso não é um relatório de bug, é o projeto sendo explicado. As unidades sem prefixo deixam você preencher a tela por completo, e o preço é que uma barra pode ficar por cima do que você preencheu.

O que faz do svh a unidade que quase todo mundo que recorre ao vh realmente queria. A especificação a descreve como a que preenche a tela sem que nada do seu conteúdo seja encoberto quando todos os elementos dinâmicos de interface estão aparecendo — e, na mesma frase, chama as unidades pequenas de mais seguras em geral, avisando que podem não produzir o layout mais bonito depois que a barra se esconde. Mais seguro e um pouco mais vazio: esse é o troco, e ele está no padrão, não descoberto num rastreador de bugs.

A medição acima é a versão honesta dessa afirmação. Em vez de garantir que o seu navegador segue a definição, a página pergunta a ele: se vh e lvh voltarem iguais, é a especificação funcionando; e se algum dia não forem, a ferramenta diz e marca como o único resultado aqui que seria falha do navegador e não um fato sobre o seu aparelho.

As unidades dinâmicas não são um upgrade grátis

Se svh fica um pouco curta e vh um pouco longa, dvh parece a resposta óbvia, e às vezes é. A especificação é incomumente direta sobre o custo: os tamanhos das unidades dinâmicas não são estáveis nem com o viewport inalterado, e usá-las pode fazer o conteúdo mudar de tamanho enquanto o usuário rola a página — o que, ela continua, pode ser perturbador para o usuário e caro em desempenho.

Há ainda um detalhe que explica por que dois celulares podem se comportar de formas diferentes na mesma página. Se uma interface que se recolhe muda todas as unidades de uma vez, ou se em vez disso só aparece como a diferença entre o tamanho pequeno e o grande, depende em boa parte do navegador. O padrão limita isso nas duas pontas — o que acontece por causa da rolagem tem de cair no segundo caso, e o que tem estado estável o bastante para que refazer o layout ajude o leitor tem de cair no primeiro — mas entre essas duas regras sobra espaço para os navegadores discordarem, e eles discordam.

As unidades dinâmicas vêm com mais uma permissão que vale conhecer antes de contar com um comportamento suave: um navegador não é obrigado a animá-las enquanto uma interface se expande ou se recolhe, e pode calculá-las como se ela estivesse totalmente aberta ou totalmente fechada durante esse tempo. A recomendação é supô-la recolhida. Então, se a linha dinâmica desta página saltar em vez de deslizar, é uma escolha conforme e não uma falha.

O que isto não pode te dizer

A limitação mais importante vem da própria especificação, não de uma descoberta nossa. Algumas interfaces de navegador se sobrepõem ao conteúdo de propósito e não causam nenhum deslocamento de layout — e portanto não afetam nenhum dos comprimentos de viewport. Ou seja, svh é mais segura que vh, e não é uma garantia: uma sobreposição desse tipo fica em cima de um elemento perfeitamente dimensionado em svh e nenhum destes números jamais vai mencioná-la.

A medição descreve este navegador, esta janela e este momento. Gire o aparelho, abra um teclado, entre em tela cheia ou instale outro navegador e os números mudam — que é justamente a ideia, mas significa que você não consegue deduzir o comportamento de um celular a partir de um notebook. Se a linha da diferença disser que nada se recolhe, é uma afirmação verdadeira sobre a janela em que você está e não diz nada sobre a de mais ninguém.

Há uma coisa que a página deliberadamente não faz: recomendar uma unidade. Qual é a certa depende de o elemento nunca poder ser coberto, nunca poder deixar sobra, ou sempre precisar caber exato, e são três requisitos distintos que nenhuma ferramenta pode escolher por você. O que ela pode fazer é mostrar o tamanho da diferença em hardware real, para a escolha ser feita contra um número em vez de um palpite.

Por fim, isto mede unidades, não layouts. Uma seção que transborda pode estar fazendo isso por causa da unidade, ou de uma margem, um cabeçalho fixo ou uma barra de rolagem sobre a qual a unidade nada sabe. Se os números aqui parecem certos e a sua página ainda transborda, a unidade não é a culpada.

Por que é grátis?

A medição roda no seu navegador: a página faz o layout de um elemento oculto em cada unidade e lê o resultado. Não há servidor envolvido, então não há nada para cobrar nem conta para criar.

Nada é enviado e nada é guardado. Os números existem só na sua aba, e recarregar a página os mede de novo do zero.