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

• 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

[hided62]

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]

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

[tomriddle7]

Il y a tellement de Viewport Units que ça commence à devenir déroutant.

[carnoxen]

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...