svh, lvh et dvh sont des unités de hauteur en CSS utilisées pour définir la taille d’un élément en fonction de la hauteur de la fenêtre d’affichage (viewport) du navigateur. Elles appartiennent au groupe des unités viewport, tout comme vw (viewport width), mais diffèrent dans leur mode de calcul. Comprendre leurs différences est crucial pour concevoir des sites web adaptatifs (responsive), notamment sur les appareils mobiles.
vh (viewport height) : Initialement, vh était défini comme 1 % de la hauteur initiale de la fenêtre d’affichage. Cependant, sur les appareils mobiles, l’interface utilisateur (UI) du navigateur peut redimensionner la fenêtre d’affichage lors du défilement, entraînant des incohérences dans le calcul de la hauteur. Actuellement, vh est généralement calculé sur la base de la hauteur maximale de la fenêtre d’affichage, c’est-à-dire lorsque l’UI du navigateur est réduite au minimum. Cela peut provoquer un débordement de contenu hors de l’écran lorsque l’UI du navigateur est plus grande.
lvh (large viewport height) : lvh est défini comme 1 % de la hauteur maximale de la fenêtre d’affichage, similaire au fonctionnement actuel de vh. lvh est utile lorsque vous souhaitez qu’un élément conserve une hauteur égale à la hauteur maximale de la fenêtre d’affichage, quelle que soit la taille de l’UI du navigateur.
svh (small viewport height) : svh est défini comme 1 % de la hauteur minimale de la fenêtre d’affichage, c’est-à-dire lorsque l’UI du navigateur est agrandie au maximum. svh permet de concevoir un élément dont la hauteur remplit l’écran, même lorsque l’UI du navigateur occupe un espace important. L’utilisation de svh évite que le contenu ne soit masqué par l’UI du navigateur.
dvh (dynamic viewport height) : dvh est défini comme 1 % de la hauteur dynamique de la fenêtre d’affichage, ce qui signifie que la hauteur est calculée en continu en fonction de la taille actuelle de la fenêtre d’affichage, même lorsque l’UI du navigateur change. Bien que dvh semble idéal pour que le contenu s’adapte toujours à la fenêtre d’affichage, le redimensionnement constant peut entraîner une expérience utilisateur saccadée et affecter les performances. Par conséquent, il est conseillé de limiter l’utilisation de dvh aux cas où cela est absolument nécessaire. Son utilisation peut engendrer des sauts de contenu ou des changements de taille brusques lors du défilement.
En résumé, svh et lvh offrent une approche plus stable pour définir la hauteur en fonction de la fenêtre d’affichage, tandis que dvh doit être utilisé avec prudence. Le choix de l’unité appropriée dépend de l’objectif de conception et de l’expérience utilisateur souhaitée. lvh conserve sa taille, svh se rétracte en fonction de l’UI du navigateur, et dvh change de taille continuellement.
