Nouvelles unités de viewport CSS : `svh`, `lvh`, `dvh`

 (ishadeed.com)
21 points par xguru 2023-07-14 | 4 commentaires | Partager sur WhatsApp
  • Définir des dimensions à partir de la largeur/hauteur du viewport est pratique, mais vh pose de nombreux problèmes sur mobile
    → car la taille du viewport n’inclut pas l’interface de la barre d’adresse du navigateur
  • En théorie, 100vh devrait correspondre à toute la hauteur du viewport sur mobile, mais cela pose problème sur Safari/Chrome (Android), qui masquent l’UI au défilement
  • C’est pourquoi le groupe de travail CSS a introduit de nouvelles unités : svh, lvh, dvh
    • svh Small Viewport : hauteur du viewport lorsque l’UI de la barre d’adresse n’est pas réduite
    • lvh Large Viewport : hauteur du viewport lorsque l’UI de la barre d’adresse est réduite
    • dvh Dynamic Viewport : varie dynamiquement entre svh et lvh
  • Avec 100dvh, il est possible de faire en sorte qu’un bouton placé tout en bas reste toujours visible
    • Mais il faut rester prudent, car cela peut poser des problèmes de performances

À lire aussi

4 commentaires

 
hided62 2023-07-19

Waouh ! Sur Firefox for Android, il y avait des comportements terriblement bizarres avec position:fixed et bottom: 0, donc il va falloir vérifier si ça règle le problème.
 
tobyyun 2023-07-14

https://caniuse.com/viewport-unit-variants
iOS est pris en charge à partir de la version 15.4, Android à partir de la version 114.
 
tomriddle7 2023-07-14

Il y a tellement de Viewport Units que ça commence à devenir déroutant.
 
carnoxen 2023-07-14

L'ironie, c'est qu'un problème qui devrait relever de la responsabilité du navigateur est pris en charge par le groupe de normalisation...