Avec les périphériques mobiles de toutes les tailles qui sortent chaque année, il est devenu de plus en plus compliqué de répondre correctement aux différents besoins.
Si vous avez déjà rendu un site responsive (adapté aux tailles d'écran), vous savez de quoi je veux parler ! 😁
Heureusement, des unités de vue dynamique (qu'on appelle Dynamic Viewport Units) comme svh, lvh et dvh sont entrées dans l'arsenal des développeurs front-end pour créer des designs responsives dynamiques facilement.
svh(Small Viewport Height) - Qui permet de dire que1svhcorrespond à 1% de la zone visible lorsque les contrôles du navigateur sont visibles (comme la barre de navigation)lvh(Large Viewport Height) - Qui permet de dire que1lvhcorrespond à 1% de la zone visible lorsque les contrôles du navigateur sont cachésdvh(Dynamic Viewport Height) - Qui permet de dire que1dvhcorrespond à 1% de la hauteur de la zone visible en passant de manière automatique de lvh à svh selon que les contrôles soient visibles ou non
Voyons ces unités en détail ! Mais avant, commençons par comprendre ce qu'est vraiment le viewport.
Qu'est-ce que le Viewport ?
Le viewport est tout simplement la zone visible d'une page web dans un navigateur : c'est l'endroit dans lequel nous voyons un site internet se charger.
D'ailleurs, il n'est pas rare d'utilisé une de ces deux unités importantes pour travailler avec le viewport :
vh(Viewport Height)vw(Viewport Width)
Ces deux unités permettent de dire que 100vh par exemple correspond à toute la hauteur du navigateur, et donc souvent, on l'utilise pour afficher une image dès qu'un visiteur arrive sur notre site internet.
.main {
background-image: url(...);
background-size: cover;
height: 100vh;
}Cependant, avec tous les nouveaux périphériques mobiles, les tailles d'écran sont devenues nombreuses.
Que ce soit avec des éléments comme les barres de navigation ou encore les claviers virtuels, la taille du viewport n'est plus forcément la même pour tout le monde.
C'est à cet instant que les unités svh, lvh et dvh peuvent nous aider.
Les unités CSS SVH, LVH et DVH
L'unité CSS SVH (Small Viewport Height)
Cette unité CSS se base sur la taille du viewport quand les boutons sont visibles. Autrement dit, sur la plus petite hauteur que le viewport peut atteindre.
Elle permet donc de ne pas avoir de surprise en prévoyant les scénarios pour lesquels l'espace est réduit (pensez à votre barre de navigation qui s'affiche ou se réduit quand vous utilisez Safari sur iOS 😉).
L'unité CSS LVH (Large Viewport Height)
L'unité lvh correspond à la hauteur maximale du viewport même si des boutons peuvent réduire temporairement une partie de cette hauteur : par exemple la barre de navigation ou le mode "plein écran".
Elle est très utile pour paramétrer des éléments en partant du principe que la taille disponible est maximale.
L'unité CSS DVH (Dynamic Viewport Height)
Il existe un petit problème avec les unités SVH et LVH : l'une permet de styliser selon que les boutons soient visibles (SVH) et l'autre selon que les boutons soient invisibles (LVH).
De ce fait : on doit forcément faire un choix entre :
- faire un design en partant du principe que les boutons sont visibles
- ou faire un design en partant du principe que les boutons sont invisibles
Nous, on aurait aimé faire un design dynamique : qui soit de 100% de la hauteur du viewport quand les boutons sont visibles et en même temps 100% de la hauteur du viewport quand les boutons sont invisibles.
Bref, on veut pouvoir oublier un peu nos boutons et se concentrer sur la page en tant que tel.
Evidemment, vous me voyez venir : on peut utiliser pour ça l'unité dvh.
C'est la plus flexible des trois. Elle représente toute la hauteur du viewport dynamiquement :
- Si les boutons sont affichés -
100dvh= 100% de la hauteur de la page visible dans le viewport - Si les boutons ne sont pas affichés -
100dvh= 100% de la hauteur de page visible dans le viewport déduit de la taille des boutons
100dvh correspond finalement à la hauteur de la page, peu importe que les boutons soient visibles ou pas.
Tableau récapitulatif entre vh, lvh, svh et dvh
Récapitulons ensemble les principales différences entre ces 4 unités de mesure CSS.
| Unité CSS | Descriptif |
vh | Représente la hauteur du viewport sans prendre en compte s'il y a des boutons affichés ou non |
svh | Représente la hauteur minimale du viewport (comme si les boutons étaient visibles) |
lvh | Représente la hauteur maximale du viewport (comme si les boutons étaient invisibles) |
dvh | Représente la hauteur dynamique du viewport, donc 100dvh ne vaut pas le même nombre de pixels selon que les boutons sont visibles ou non |
Et niveau compatibilité, qu'est-ce que ça donne ?
Ces unités CSS sont assez récentes et tous les navigateurs ne sont pas compatibles pour le moment.
Vous pouvez vérifier à tout moment quel navigateur peut lire ou ne pas lire ces unités sur caniuse.
Comme nous pouvons le voir, l'unité dvh est compatible avec tous les navigateurs sauf avec internet explorer (bon en même temps...) et firefox (vraiment très surprenant cependant).
Conclusion
Les unités lvh, svh et dvh sont très intéressantes ! Elles permettent de contrôler facilement le comportement des éléments sur des designs responsive.
Cependant, attention car ces dernières ne sont pas encore très compatibles avec les navigateurs les plus utilisés comme firefox.
C'est super intéressant tout ça, mais si je veux aller plus loin ? 😇
Vous pouvez jeter un oeil dans notre formation dédiée à HTML et CSS ! Il n'y a pas plus complet c'est garanti !