Neste tutorial, abordaremos os desafios ao trabalhar com a unidade clássica 100vh para criar seções em tela cheia e discutiremos algumas ótimas unidades CSS alternativas.
As seções principais ou de tela inteira são parte integrante do design da IU. Eles existem em diferentes tipos de sites, desde landing pages até sites de portfólio, e visam, em primeiro lugar, chamar a atenção dos visitantes. As partes comuns de uma seção heróica são apresentações de slides, imagens, vídeos, manchetes, textos, links de call to action, etc.
100vh
Nos últimos anos, a maneira mais fácil de criar uma seção em tela cheia tem sido dar-lhe uma altura de 100vhassumindo que sua largura seja igual à largura da janela de visualização.
Nos navegadores de desktop, tudo funciona conforme o esperado.
No entanto, em navegadores móveis, as seções de tela inteira não ficam totalmente visíveis por padrão. Podemos vê-los todos apenas à medida que rolamos, quando a barra de endereço flutuante do agente do usuário diminui. Observe que a posição da barra de endereço pode aparecer na parte superior ou inferior.
Isso pode levar a uma experiência ruim para o usuário se, por exemplo, nossas seções incluírem conteúdo centralizado verticalmente ou conteúdo como frases de chamariz que ficam na posição inferior e, portanto, são inicialmente semivisíveis para os visitantes.
Para demonstrar esse comportamento, criei uma página GitHub que contém uma seção de tela inteira com uma imagem de fundo e conteúdo centralizado verticalmente.
Vá em frente e visite essa página em seu dispositivo móvel. Você notará que a imagem principal não está totalmente visível por padrão.
Felizmente, o CSS moderno fornece algumas novas unidades relativas à janela de visualização com excelente suporte ao navegador (mais de 90% no momento da escrita) que nos ajudam a resolver esse problema sem depender de soluções JavaScript. Seu comportamento é o mesmo do 100vh em navegadores de desktop, pois não há interfaces UA dinâmicas. O comportamento deles difere em dispositivos móveis.
100 dvh
A primeira dessas unidades é a unidade de altura da janela de visualização dinâmica (dvh).
Aqui está sua definição no documento Working Draft do W3C:
O unidades dinâmicas de porcentagem da janela de visualização(dv*) são definidos em relação ao tamanho da janela de visualização dinâmica: a janela de visualização dimensionada com consideração dinâmica de qualquer UA interfaces que são expandidas e retraídas dinamicamente. Isso permite que os autores dimensionem o conteúdo de forma que ele caiba exatamente na janela de visualização, independentemente de tais interfaces estarem presentes ou não.
A maneira mais fácil de entender seu comportamento é revisitar nossa página e clique no dvh botão para aplicar 100dvh para a seção de heróis.
O que você notará é que, por padrão, a seção do herói aparecerá inteira. Então, conforme você rola quando a barra de endereço é recolhida, ela atualiza a altura da seção e se comporta como 100vh.
No entanto, como esta unidade sempre tenta corresponder à altura da janela de visualização, independentemente da presença da barra de ferramentas, ela causa um salto/flash instantâneo na rolagem e, portanto, um reposicionamento em nosso conteúdo centralizado – isso certamente não a torna um substituto ideal para 100vh na maioria dos casos e pode ser perturbador para o usuário e/ou caro em termos de desempenho.
100lvh
A seguir, temos a unidade de altura da janela de visualização grande (lvh).
Aqui está sua definição no documento Working Draft do W3C:
O grandes unidades de porcentagem da janela de visualização(nível*) e unidades de porcentagem da janela de visualização padrão (v*) são definidos em relação ao tamanho grande da janela de visualização: o tamanho da janela de visualização assumindo qualquer UA interfaces que são expandidas e retraídas dinamicamente para serem retraídas. Isso permite que os autores dimensionem o conteúdo de forma que seja garantido o preenchimento da janela de visualização, observando que esse conteúdo pode ficar oculto atrás de tais interfaces quando elas são expandidas.
Novamente, a maneira mais fácil de entender seu comportamento é revisitar nossa página e clique no lvh botão para aplicar 100lvh para a seção de heróis.
O que você notará é que nossa seção se comportará exatamente como quando sua altura estiver definida como 100vh. Dito isto, por padrão, a seção herói não aparecerá inteiramente, mas aparecerá quando a barra de endereço diminuir.
Em outras palavras, esta unidade sempre retornará a maior altura visível da janela de visualização que ocorrerá na rolagem quando a barra de ferramentas for a menor – isso certamente não a torna um substituto ideal para 100vh no momento em que este livro foi escrito, pois não oferece nada de novo.
100 svh
Finalmente, temos a pequena unidade de altura da janela de visualização (svh).
Aqui está sua definição no documento Working Draft do W3C:
O pequenas unidades percentuais da janela de visualização (SV*) são definidos em relação ao tamanho pequeno da janela de visualização: o tamanho da janela de visualização assumindo qualquer UA interfaces que são expandidas e retraídas dinamicamente para serem expandidas. Isso permite que os autores dimensionem o conteúdo de forma que ele caiba na janela de visualização mesmo quando tais interfaces estão presentes, observando que tal conteúdo pode não preencher a janela de visualização quando tais interfaces são retraídas.
Uma vez porganho, examine seu comportamento revisitando nossa página e clicando no svh botão para aplicar 100svh para a seção de heróis.
O que você notará é que nossa seção estará sempre visível e se comportará como o estado inicial (antes da rolagem) do 100dvh.
Em outras palavras, esta unidade sempre retornará a menor altura visível da janela de visualização que ocorrerá quando a barra de ferramentas for expandida – o que certamente a torna um substituto ideal para 100vh no momento em que este livro foi escrito.
Cair pra trás
Se você estiver satisfeito com alguma das unidades anteriores e quiser usá-la, mas ao mesmo tempo precisar de um substituto para o 100vh unit apenas para ficar mais seguro, tente algo como este CSS antigo:
1 |
.hero { |
2 |
height: 100svh; |
3 |
height: 100vh; |
4 |
}
|
Desta forma, os navegadores não suportados irão ignorar o primeiro valor da propriedade.
Conclusão
Neste tutorial, discutimos os desafios de criar seções verdadeiramente em tela cheia em todos os dispositivos ao trabalhar com diferentes unidades relativas à janela de visualização.
Vamos recapitular o comportamento em navegadores móveis:
- Contexto
100vhou100lvhpara uma seção produzirá o mesmo resultado. A seção terá uma altura fixa (a menos que redimensionemos a janela de visualização), mas não poderemos vê-la inteiramente, a menos que rolemos e a barra de endereço diminua. - Contexto
100dvhpara uma seção significa que ela não terá uma altura fixa, mas será recalculada à medida que rolamos. Como resultado disso, os elementos dentro dessa seção podem ser reposicionados. Seu comportamento pode ser útil em determinados cenários, mas pode ser irritante para o usuário. - Contexto
100svhpara uma seção significa que ela sempre terá uma altura fixa (a menos que redimensionemos a janela de visualização) que será igual à altura inicial da janela de visualização (antes de rolarmos) — quando a barra de endereço for expandida. A seção ficará totalmente visível por padrão, assim como o estado inicial do100dvh.
Minha recomendação, neste momento, é criar seções de heróis em tela cheia com 100svh e ter um substituto para 100vh.
Como sempre, muito obrigado pela leitura!
