Tout comprendre sur les unitées LVH, SVH et DVH avec CSS

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 que 1svh correspond à 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 que 1lvh correspond à 1% de la zone visible lorsque les contrôles du navigateur sont cachés
• dvh (Dynamic Viewport Height) - Qui permet de dire que 1dvh correspond à 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 :

1. vh (Viewport Height)
2. 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.

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 !