Unités LVH, SVH et DVH : le guide CSS pour un viewport responsive parfait

Las de constater que vos layouts mobiles tronqués par les barres de navigation des navigateurs ? Cet article décortique en détail les unités lvh, svh et dvh, des solutions innovantes en CSS pour un design responsive au cordeau, qui transforment radicalement la gestion de la hauteur visible dans vos projets web. Voyons comment ces nouvelles unités de viewport s’ajustent en temps réel à la dispositif de l’utilisateur. Ces unités proposent une approche ingénieuse pour les problématiques liées aux UI des navigateurs et les claviers virtuels – une maîtrise parfaite des dimension de vos éléments composants devient un jeu d’enfant en perspective!

Sommaire

1. Définition des unités de viewport en CSS
2. Les nouvelles unités LVH, SVH et DVH
3. Cas d’utilisation concrets
4. Intégration et bonnes pratiques
5. Optimisation des performances
6. Avantages pour le design responsive
7. Limites et alternatives

Définition des unités de viewport en CSS

Le viewport, c’est tout simplement la zone visible d’une page web dans la fenêtre du navigateur. Pour que les éléments s’adaptent parfaitement à cet espace, on dispose d’unités CSS dédiées. Prenons l’exemple du vh et du vw : ils correspondent chacun à 1% de la hauteur comme de la largeur du viewport. Ces mesures se révèlent donc importantes pour obtenir un affichage correct. Mais attention : l’unité vh, surtout sur mobile notamment, où la barre navigateur peut apparaître et disparaître modifiant ainsi la hauteur du viewport.

Ainsi, si un élément est défini avec `100vh`, il risque de dépasser de la fenêtre et cela crée un effet de défilement pas très agréable. C’est pourquoi il peut être intéressant d’explorer d’autres unités pour un design responsive optimal.

Les nouvelles unités LVH, SVH et DVH

Voici que débarquent les nouvelles unités LVH, SVH et DVH proposent une alternative intéressante aux unités de viewport traditionnelles. Puisqu’elles permettent un contrôle plus fin de la hauteur de la fenêtre, elles s’avèrent particulièrement précieuses pour le mobile.

Voyons cela plus en détail : l’unité SVH (Small Viewport Height) représente 1% de la hauteur disponible dans le viewport lorsque les barres du navigateur apparaissent. L’unité LVH (Large Viewport Height), prend quant à elle en compte 1% de la hauteur maximale lorsque l’interface sont cachées. DVH (Dynamic Viewport Height) varie intelligemment entre LVH et SVH selon la visibilité des contrôles. Ces nouvelles unités CSS révolutionnent le design responsive en épousant parfaitement la surface utile de l’écran.

En clair, l’unité SVH intègre la présence des barres du navigateur tandis que la LVH calcule selon la pleine hauteur disponible et la DVH modifie sa valeur en continu, permettant ainsi une adaptation plus fine aux variations dynamiques de l’interface utilisateur.

Unité	Description	Cas d’utilisation
vh (Viewport Height)	Représente 1% de la hauteur du viewport. Ne tient pas compte des barres de navigation dynamiques.	Convient aux environnements desktop où la hauteur du viewport est relativement stable. Peut causer des problèmes sur mobile à cause des barres d’adresse.
svh (Small Viewport Height)	Représente 1% de la hauteur du viewport lorsque les contrôles du navigateur (barres d’adresse, etc.) sont visibles. Correspond à la hauteur minimale du viewport.	Parfaite pour les interfaces mobiles où il est pertinent d’éviter que le contenu ne soit masqué par les éléments d’interface du navigateur. Utile avec les barres fixes.
lvh (Large Viewport Height)	Représente 1% de la hauteur du viewport lorsque les contrôles du navigateur sont cachés. Correspond à la hauteur maximale du viewport.	Adaptée pour les bannières pleine hauteur sur desktop, où l’on souhaite amplifier l’espace d’affichage disponible.
dvh (Dynamic Viewport Height)	Représente 1% de la hauteur de la zone visible et s’ajuste en temps réel entre la présence ou l’absence des contrôles du navigateur.	Parfaite pour les formulaires interactifs sur mobile et les applications où la hauteur du viewport varie en temps réel (claviers virtuels). Assure une expérience utilisateur fluide.
Solutions de repli	Utiliser les unités vh comme base, puis appliquer des ajustements via des media queries ou JavaScript pour les navigateurs plus récents qui prennent en charge les unités dynamiques.	Assurer la rétrocompatibilité avec les anciens navigateurs qui ne supportent pas les unités dvh, lvh et svh.

Cas d’utilisation concrets

Scénarios pour SVH et LVH

Pour les interfaces avec des barres fixes, SVH s’avère être un allié précieux. En utilisant SVH, vous vous assurez qu’le contenu ne déborde pas puisqu’elle unité prend en compte la taille du viewport quand les barres sont visibles, pas de mauvaises surprises.

Prenons l’exemple d’une bannière pleine hauteur sur desktop. Avec LVH, espace disponible maximal. Cette unité assure que votre bannière couvrira intégralement la totalité de la fenêtre, même lorsque le navigateur est légèrement redimensionné. Une solution qui est parfait pour des affichage impactant et professionnel.

Applications interactives grâce au DVH

DVH se démarque grâce à son adaptation dynamique. Sur mobile, le clavier surgit modifie instantanément la hauteur du viewport et DVH s’adapte en continu, assurant que votre contenu demeure accessible, pendant que le clavier apparaît. Voilà pourquoi il constitue un atout majeur pour une expérience sans accroc.

Appliquez plutôt le DVH dans vos formulaires interactifs pour l’expérience mobile améliorée. En définissant la hauteur du conteneur du formulaire avec DVH, les données restent accessibles quand s’affiche le clavier virtuel. Pour une mise en page efficace des formulaires, n’oubliez pas de maîtriser comment aligner verticalement ou horizontalement en CSS vos éléments : DVH s’ajuste, empêchant ainsi que les champs ne disparaissent, ce qui assure une interaction sans irritation.

Intégration et bonnes pratiques

Compatibilité navigateurs

La prise en charge par les navigateurs des unités SVH, LVH et DVH ne cesse d’évoluer. Pour connaître l’état actuel de cette compatibilité, vous pouvez consulter des ressources comme « Can I use ». Bon à savoir : l’unité dvh est compatible avec tous les navigateurs sauf pour Internet Explorer et de Firefox.

Pour garantir une bonne rétrocompatibilité, mieux vaut prévoir des solutions de repli. Vous pouvez utiliser les bonnes vieilles unités vh comme base puis ajuster le rendu grâce aux queries pour les navigateurs récents. En 2015, Safari/Webkit a rendu l’unité `vh` statique — c’est-à-dire égale à la taille du viewport quand l’interface utilisateur du navigateur est à sa taille minimale. Chrome/Blink ont suivi environ un an après. Le détail technique est disponible ici. Un polyfill existe d’ailleurs pour ajouter la prise en charge des unités `svh`, `dvh` et `lvh` aux navigateurs qui ne les supportent pas nativement notamment sous iOS et Android. Son code source est disponible ici.

Pour obtenir une compatibilité maximale de votre site web, connaître l’état actuel du support navigateur pour les nouvelles unités de viewport s’avère crucial. Voici quelques méthodes pour détecter et gérer la prise en charge des unités LVH, SVH et DVH.

• Les Feature Queries CSS : Grâce aux feature queries, on peut tester directement dans votre code CSS si le navigateur prend en charge une fonctionnalité spécifique comme les unités `dvh`, `lvh` ou `svh`. Cela vous permet d’appliquer des styles différents en fonction du support du navigateur ce qui assure une expérience utilisateur optimale pour tous.
• Modernizr pour la détection JavaScript : Modernizr se présente comme une bibliothèque JavaScript qui détecte la prise en charge des fonctionnalités CSS3 et HTML5 dans le navigateur de l’utilisateur. On peut l’utiliser pour vérifier si les unités `dvh`, `lvh` et `svh` sont supportées et appliquer alors des styles spécifiques en conséquence.
• Fallback avec les unités VH : Dans le cas des navigateurs qui ne supportent pas les nouvelles unités, utilisez les unités `vh` comme solution de repli. Vous pouvez ensuite utiliser les feature queries CSS pour redéfinir précisément la hauteur avec les unités `dvh`, `lvh` ou `svh` pour les navigateurs compatibles permettant ainsi une dégradation progressive.
• Opter pour le Progressive Enhancement : L’idée ? Commencer par une base fonctionnelle pour tous les navigateurs puis enrichir l’expérience pour les navigateurs qui supportent les nouvelles unités de viewport. Cette approche garantit que tous les utilisateurs peuvent accéder au contenu tout en offrant une expérience améliorée à ceux qui utilisent des navigateurs modernes.

En appliquant ces méthodes de détection, vous pouvez créer un site web qui peut bénéficier des nouvelles unites de viewport tout en restant accessible et fonctionnel sur les navigateurs plus anciens.

Optimisation des performances

Logiquement, l’impact des unités LVH, SVH et DVH sur les performances dépend de la façon dont elles sont utilisées. Une surutilisation pourrait affecter le rendu de votre page web.

On recommande plutôt de combiner ces unités avec les container queries et les media queries pour créer un design responsive optimal. D’un côté, les media queries permettent d’adapter les styles en fonction de l’écran, alors que les container queries ajustent dynamiquement les styles en fonction de la taille de son conteneur parent. Prenons un exemple : on pourrait utiliser une query pour définir une hauteur via DVH sur les petits écrans pour ensuite l’ajuster avec une container query sur les grands écrans.

Avantages pour le design responsive

Les unités LVH, SVH ou DVH sont particulièrement utiles lorsqu’il s’agit d’adapter un site aux différentes tailles d’écran. Elles permettent de créer des layouts responsive qui s’adaptent naturellement à tous les formats, simplifiant ainsi considérablement le travail de développement mobile.

L’utilisation des unités LVH, SVH et DVH en CSS constituent un atout qui s’avèrent particulièrement utiles en développement web puisqu’elles limitent le recours systématique aux hacks CSS pour que les interfaces s’affichent correctement sur mobile. Ces unités offrent un contrôle précis sur la hauteur des éléments selon les dimensions réelles du viewport, permettant d’éviter les calculs complexes en JavaScript.

Limites et alternatives

Actuellement, le support des unités LVH, SVH et DVH n’est toujours pas universel. On observe notamment des incompatibilités sur certains navigateurs, Singulièrement Firefox et Internet Explorer. Comme l’adoption complète se fait encore attendre, des solutions alternatives sont cruciales (en attendant le temps que tous les navigateurs s’alignent).

Pour adopter progressivement ces mesures, mieux vaut associer les unités LVH, SVH et DVH avec les viewport units classiques. Privilégiez d’abord les unités VH classiques, avant d’y intégrer progressivement les nouvelles unités là où elles sont prises en charge puisque cela garantit une expérience utilisateur cohérente sur tous les navigateurs et facilite la transition vers ces évolutions techniques. Concrètement, il suffit de définir la hauteur par défaut à `100vh`, puis la remplacer par `100dvh` pour les navigateurs modernes.

Maîtriser les unités SVH, LVH et DVH en CSS reste crucial pour un design responsive vraiment moderne. Voyons pourquoi : ces unités En effet, ces unités proposent un contrôle précis de la taille du viewport, tout en s’ajustent naturellement aux barres d’outils navigateurs. Quant à l’adoption Opter pour ces dimensions permet une expérience utilisateur réellement optimisée sur tous types d’écrans, au point que votre interface web gagne en adaptabilité.

FAQ

Comment utiliser SVH, LVH et DVH avec JavaScript ?

Il n’y a pas d’exemples directs d’interaction avec les unités SVH, LVH et DVH via JavaScript. Cependant, on peut imaginer que cela implique d’accéder aux valeurs calculées des propriétés CSS. Prenons le cas de l’utilisation de window.getComputedStyle pour obtenir la hauteur d’un élément défini en 100dvh, et ensuite utiliser cette valeur en JavaScript.

Par ailleurs, JavaScript pourrait servir à modifier dynamiquement les styles CSS d’éléments en utilisant SVH, LVH ou DVH. On pourrait aussi l’utiliser pour réagir aux changements de taille du viewport, en utilisant window.addEventListener('resize', ...) pour écouter ces événements et recalculer les valeurs basées sur ces unités.

Comment gérer le support des unités SVH, LVH, DVH avec un CDN ?

Pour gérer le support des unités SVH, LVH et DVH avec un CDN, il est recommandé d’utiliser un polyfill. Un polyfill permet d’ajouter des fonctionnalités modernes à des navigateurs plus anciens qui ne les prennent pas en charge nativement, car il calcule les valeurs de ces unités en JavaScript et les applique aux éléments CSS correspondants.

En hébergeant ce polyfill sur un CDN (Content Delivery Network), vous vous assurez que les utilisateurs du monde entier pourront le télécharger rapidement. Ils bénéficieront alors du support des unités SVH, LVH et DVH, quel que soit leur navigateur. Un exemple de polyfill disponible sur jsdelivr est « large-small-dynamic-viewport-units-polyfill ».

Comment tester l’implémentation de SVH, LVH et DVH ?

Pour tester l’implémentation de SVH, LVH et DVH, il faut comprendre que ces unités CSS permettent de gérer la hauteur du viewport de manière responsive. Elles tiennent compte des barres de navigation dynamiques des navigateurs mobiles. SVH correspond à la plus petite hauteur, LVH à la plus grande, et DVH est dynamique.

Il est conseillé de définir une hauteur minimale avec SVH, plutôt que de simplement définir la hauteur de la section. Ainsi, la section respecte le contenu et s’ajuste en fonction. Tester sur différents navigateurs est important pour assurer la compatibilité, et dans Webflow, vous pouvez saisir directement la valeur et l’unité souhaitée (par exemple, 100 SVH) dans le champ de saisie.

Existe-t-il des outils pour faciliter l’utilisation des unités Lvh, Svh et Dvh en Css ?

Bien qu’il n’existe pas d’outils spécifiques qui automatisent directement l’utilisation des unités LVH, SVH et DVH, certains environnements de développement web comme Webflow facilitent leur mise en œuvre. Dans Webflow, il suffit de saisir la valeur et l’unité souhaitée (par exemple, 100 SVH) dans le champ de saisie.

Par ailleurs, une bonne compréhension des unités et l’application de bonnes pratiques contribuent à une utilisation efficace. Définir une hauteur minimale avec SVH pour permettre à la section de s’ajuster en fonction du contenu est un bon exemple. Les gestionnaires de style, comme celui de Webflow, permettent aussi de rechercher et de modifier facilement les classes CSS qui utilisent ces unités, ce qui simplifie grandement le travail.