Novas unidades de viewport do CSS: svh, lvh, dvh

 (ishadeed.com)
21 pontos por xguru 2023-07-14 | 4 comentários | Compartilhar no WhatsApp
  • Definir com base na largura/altura da viewport é conveniente, mas vh tem muitos bugs no mobile
    → porque o tamanho da viewport não inclui a UI da barra de endereço do navegador
  • 100vh deveria corresponder à altura total da viewport no mobile, mas há problemas no Safari/Chrome (Android), que ocultam a UI ao rolar
  • Por isso, o grupo de trabalho do CSS apresentou novas unidades: svh, lvh, dvh
    • svh Small Viewport: altura da viewport quando a UI da barra de endereço não está recolhida
    • lvh Large Viewport: altura da viewport quando a UI da barra de endereço está recolhida
    • dvh Dynamic Viewport: varia dinamicamente entre svh / lvh
  • Com 100dvh, é possível configurar para que um botão na parte inferior fique sempre visível
    • Mas é preciso ter cuidado, pois pode haver problemas de desempenho

Leituras relacionadas

4 comentários

 
hided62 2023-07-19

Uau! No Firefox para Android havia coisas que se comportavam de um jeito terrivelmente estranho ao usar position:fixed, bottom: 0, então vou ter que conferir se isso foi resolvido.
 
tobyyun 2023-07-14

https://caniuse.com/viewport-unit-variants
iOS tem suporte desde a versão 15.4, e o Android desde a 114.
 
tomriddle7 2023-07-14

Agora está começando a ficar confuso com tantas Viewport Units
 
carnoxen 2023-07-14

É irônico que isso seja um problema pelo qual o navegador deveria ser responsável, mas quem acaba assumindo a responsabilidade é o grupo de padronização...