Découvrez les nouvelles unités CSS de viewport : SVH, LVH, DVH et bien plus !

Les unités CSS de viewport comme vh et vw sont des piliers essentiels du développement web moderne, permettant de créer des designs adaptatifs et responsives. Cependant, elles présentent des limites, notamment sur les appareils mobiles. Bonne nouvelle : les nouvelles unités CSS comme svh, lvh et dvh viennent résoudre ces problèmes.

Dans cet article, découvrez tout ce que vous devez savoir sur ces unités de viewport de nouvelle génération.

Les limites des unités CSS traditionnelles vh et vw

Les unités classiques vh (viewport height) et vw (viewport width) mesurent respectivement la hauteur et la largeur de la fenêtre d'affichage. Elles sont particulièrement utiles pour :

• Définir des sections pleine hauteur (100vh) ou pleine largeur (100vw).
• Créer des mises en page responsives.

Problèmes sur les appareils mobiles

Sur mobile, les unités vh et vw ne prennent pas en compte les éléments comme :

• Les barres de navigation (haut/bas).
• Les claviers virtuels, souvent affichés lorsqu'un champ de texte est actif.

Cela peut entraîner des problèmes de mise en page, comme :

• Des parties de l’interface coupées ou non visibles.
• Une mauvaise adaptation des éléments au viewport réel.

Les nouvelles unités CSS de viewport : Une révolution !

Pour surmonter ces limites, CSS introduit de nouvelles unités qui s'adaptent dynamiquement aux changements de viewport. Voici un aperçu des principales nouveautés :

1. SVH et SVW : Small Viewport Height/Width

• Définition : Représentent la hauteur et la largeur minimales du viewport, sans tenir compte des barres ou claviers.
• Utilisation idéale : Garantir que des éléments restent toujours visibles, même sur des écrans réduits.

Exemple CSS :

.header {
  height: 100svh;
}

2. LVH et LVW : Large Viewport Height/Width

• Définition : Basées sur la taille maximale du viewport, en incluant les barres de navigation.
• Utilisation idéale : Optimiser l'utilisation de l’espace disponible sur des appareils avec des barres rétractables.

Exemple CSS :

.full-screen-section {
  height: 100lvh;
}

3. DVH et DVW : Dynamic Viewport Height/Width

• Définition : Changent dynamiquement en fonction des interactions, comme l’apparition d’un clavier virtuel.
• Utilisation idéale : Créer des interfaces réellement adaptatives.

Exemple CSS :

.content {
  height: 100dvh;
}

Avantages des nouvelles unités CSS

1. Flexibilité accrue : Les nouvelles unités s’adaptent automatiquement aux variations du viewport, ce qui évite de recourir à des hacks CSS complexes.
2. Meilleure expérience utilisateur : Les utilisateurs ne rencontrent plus de sections coupées ou mal ajustées, en particulier sur mobile.
3. Moins de maintenance : Avec des unités dynamiques comme dvh, les interfaces deviennent plus robustes face aux changements de viewport.

Conclusion

Les nouvelles unités CSS de viewport, comme svh, lvh, et dvh, révolutionnent la manière dont les développeurs conçoivent des interfaces web. Elles offrent une flexibilité et une adaptabilité accrues, résolvant de nombreux problèmes liés aux appareils mobiles. Mais soyez prudent lorsque vous utilisez dvh si vous avez des éléments dépendants de la hauteur sur votre page.

Adoptez ces unités dans vos projets pour offrir une meilleure expérience utilisateur et simplifier votre code CSS.