Nuevas unidades de viewport en CSS: `svh`, `lvh`, `dvh`

 (ishadeed.com)
21 puntos por xguru 2023-07-14 | 4 comentarios | Compartir por WhatsApp
  • Configurar en función del ancho/alto del viewport es práctico, pero vh tiene muchos bugs en móvil
    → porque el tamaño del viewport no incluye la UI de la barra de direcciones del navegador
  • 100vh debería equivaler a toda la altura del viewport en móvil, pero en Safari/Chrome (Android), que ocultan la UI al hacer scroll, se generan problemas
  • Por eso el CSS Working Group presentó nuevas unidades: svh, lvh, dvh
    • svh Small Viewport: altura del viewport cuando la UI de la barra de direcciones no está contraída
    • lvh Large Viewport: altura del viewport cuando la UI de la barra de direcciones está contraída
    • dvh Dynamic Viewport: cambia dinámicamente entre svh / lvh
  • Usando 100dvh se puede hacer que un botón ubicado al fondo siempre permanezca visible
    • Pero hay que tener cuidado, porque puede haber problemas de rendimiento

Lecturas relacionadas

4 comentarios

 
hided62 2023-07-19

¡Guau! Había cosas que se comportaban de forma terriblemente extraña en Firefox para Android al usar position:fixed, bottom: 0, así que tendré que revisar si esto lo soluciona.
 
tobyyun 2023-07-14

https://caniuse.com/viewport-unit-variants
en iOS es compatible desde la 15.4, y en Android desde la 114
 
tomriddle7 2023-07-14

Hay tantas Viewport Units que ya empieza a ser confuso.
 
carnoxen 2023-07-14

La ironía de que es un problema del que debería encargarse el navegador, pero termina asumiéndolo el grupo de estandarización...