Les unités viewport en CSS pour des mises en page modernes

Les unités CSS liées au viewport ont longtemps été un casse-tête pour les développeurs web. Si vous avez déjà créé une section pleine hauteur sur mobile et qu’elle se mettait soudainement à vibrer, bouger, se réduire ou laisser un vilain espace blanc, vous savez exactement de quoi je parle. Pendant des années, nous avons bricolé des solutions, joué avec du JavaScript, tenté des hacks parfois étranges, tout ça pour une simple hauteur d’écran. Heureusement, les choses ont changé. Les navigateurs ont enfin standardisé de nouvelles unités viewport CSS “modernes” comme dvh, dvw, svh, svw, lvh et lvw… Et très honnêtement, cela fait du bien.

• Comprendre quand utiliser les nouvelles unités viewport modernes pour éviter les mises en page qui bougent ou cassent sur mobile.
• Savoir choisir rapidement entre dvh, svh et lvh pour obtenir une interface plus stable, plus fluide et plus confortable pour l’utilisateur.
• Gagner en confiance dans vos mises en page grâce à des exemples concrets qui montrent comment ces unités améliorent réellement vos projets CSS.

Dans ce guide complet, vous allez découvrir calmement ce que sont ces nouvelles unités CSS, pourquoi elles existent, quand les utiliser et comment les intégrer dans vos projets. Vous n’avez pas besoin d’être un expert en CSS, vous pouvez même être totalement débutant. L’idée est vraiment de vous accompagner pas à pas, avec des explications simples, des exemples concrets et une vision claire. À la fin, vous serez capable d’utiliser ces unités viewport sans hésiter, avec confiance, et surtout sans stress.

Comme d’habitude sur Créa-Blog, l’objectif est que vous compreniez vraiment ce que vous faites. On va donc prendre le temps, expliquer les concepts, replacer le contexte, faire un peu de pédagogie. C’est parti.

Un petit rappel rapide : les unités CSS “classiques” du viewport

Avant de plonger dans les nouvelles unités viewport modernes, il est important de rappeler rapidement ce que sont les unités CSS historiques. Je ferai court, puisque vous avez déjà un article détaillé dessus.

Pendant longtemps, nous avons utilisé des unités comme vw, vh, vmin et vmax. Le principe était simple. vh représentait un pourcentage de la hauteur de l’écran, donc 100vh équivalait à la hauteur totale du viewport. De son côté, vw fonctionnait de la même manière sur la largeur. Ces unités CSS étaient très pratiques et pendant un moment, elles semblaient parfaites. Mais tout allait bien… jusqu’à ce que les mobiles s’en mêlent.

Sur mobile, le viewport n’est pas fixe. La barre d’adresse apparaît, disparaît, se réduit, remonte, descend. Résultat : 100vh ne mesure pas toujours la même chose. Une page peut soudainement sauter, s’allonger, se rétrécir. Et là, votre mise en page s’effondre. C’est exactement ce genre de problème que les nouvelles unités viewport viennent résoudre.

Les Dynamic Viewport Units : enfin une hauteur vraiment fiable

Entrons maintenant dans la première grande famille moderne d’unités viewport CSS : les Dynamic Viewport Units. C’est généralement par elles que tout le monde commence, et ce n’est pas pour rien. Elles sont souvent la réponse la plus naturelle aux problèmes rencontrés avec vh et vw.

Les Dynamic Viewport Units portent bien leur nom. Elles sont dynamiques parce qu’elles s’adaptent en temps réel à la taille réellement disponible du viewport. Elles ne prennent pas uniquement une valeur théorique, elles se basent sur ce que l’utilisateur voit réellement à l’instant précis où il regarde la page. Cela semble logique, mais pendant longtemps, ce n’était pas le cas.

Les unités principales que vous devez retenir sont dvh pour la hauteur et dvw pour la largeur. Il existe aussi dvmin et dvmax, mais pour un débutant, dvh et dvw suffisent largement pour commencer. Concrètement, 100dvh signifie “100 pour cent de la hauteur visible réelle du viewport, même si la barre d’adresse du mobile monte, descend, apparaît ou disparaît”.

Pour comprendre l’intérêt, imaginons une situation très courante. Vous créez une section hero en pleine page pour l’accueil de votre site, avec un grand titre, une phrase d’accroche et un bouton. Sur ordinateur, 100vh fonctionne bien. Sur mobile, tout se complique. Au chargement, la section remplit l’écran, puis lorsque l’utilisateur commence à scroller ou que la barre d’adresse change de taille, la hauteur de la section se modifie brutalement. Le visuel se tasse, le bouton se déplace, et toute l’expérience devient bancale. Avec 100dvh, la hauteur s’adapte intelligemment, sans provoquer ces sauts désagréables.

Voici un exemple très simple d’utilisation. Imaginons que vous vouliez un bloc principal qui occupe toujours exactement l’espace disponible à l’écran. Vous pourriez écrire quelque chose comme :

main {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Avec ce simple code, votre zone principale épouse parfaitement la hauteur visible, peu importe le comportement du navigateur mobile. Vous obtenez donc une interface stable, confortable et beaucoup plus professionnelle. Cela peut sembler anodin, mais pour l’utilisateur, c’est une vraie différence.

Une autre situation intéressante concerne les applications web, comme une interface de tableau de bord ou une web-app affichée sur smartphone. Avant, il fallait souvent jongler avec JavaScript pour recalculer la hauteur à chaque changement du viewport. Aujourd’hui, dvh et dvw font ce travail pour vous, sans script et de manière standardisée. C’est plus propre, plus performant et surtout plus fiable sur le long terme.

D’un point de vue pédagogique, on peut retenir une règle simple. Si vous voulez une zone qui doit toujours suivre la taille réelle de l’écran visible, même quand l’interface du navigateur bouge, utilisez dvh ou dvw. Ce sont un peu les unités “vivantes” des unités viewport, celles qui respirent en même temps que le navigateur. Et honnêtement, quand on a connu les galères d’avant, on les adopte très vite. Petite anecdote d’ailleurs : la première fois que j’ai testé dvh sur un projet mobile où tout sautait depuis des semaines, j’ai presque eu l’impression que le navigateur me disait merci.

Autre point important, les Dynamic Viewport Units fonctionnent aussi très bien sur desktop, même si le gain est surtout visible sur mobile. Cela signifie que vous pouvez les utiliser sereinement partout, sans vous dire que ce sont des unités “spéciales smartphone”. Elles font désormais partie pleinement du paysage moderne des unités CSS.

D’un point de vue apprentissage, ce groupe d’unités viewport est généralement celui que vous utiliserez le plus au quotidien. Il règle les problèmes habituels, il améliore la stabilité de vos mises en page et il simplifie la vie du développeur. Et quand une technologie simplifie vraiment nos journées, on a tendance à l’apprécier.

Maintenant, allons un peu plus loin avec deux autres familles indispensables pour des mises en page vraiment maîtrisées : les Small Viewport Units et les Large Viewport Units. Vous allez voir, elles ont chacune leur personnalité, leur utilité et leurs petits secrets.

Les Small Viewport Units : la valeur la plus “prudente” du viewport

Les Small Viewport Units, souvent abrégées en svh et svw, ont un rôle très particulier dans l’univers des unités CSS. Il s’agit des unités qui représentent la plus petite taille que peut prendre le viewport. Autrement dit, elles prennent en compte le pire scénario pour votre mise en page : celui où le navigateur a réduit au maximum l’espace disponible à cause de ses barres d’interface.

Cela signifie que svh correspond à la plus petite hauteur possible de l’écran dans une situation donnée, tandis que svw correspond à la plus petite largeur possible. Cette notion peut paraître un peu abstraite au début, mais elle devient très claire quand on pense au mobile.

Sur smartphone, l’interface du navigateur n’est pas figée. Il y a la barre d’adresse, parfois une barre de navigation en bas, des zones de sécurité, et tout cela peut apparaître, disparaître ou changer de taille. Résultat, la hauteur disponible pour votre page peut varier. Et c’est exactement là que les Small Viewport Units entrent en scène.

Elles servent à stabiliser votre mise en page en prenant comme référence la valeur minimale. C’est une manière de dire au navigateur : “Je préfère travailler avec la hauteur la plus petite possible, comme ça je suis sûr qu’il n’y aura pas de mauvaise surprise”. C’est particulièrement intéressant lorsque vous ne voulez pas que votre page grandisse ou rétrécisse en fonction des changements du navigateur.

Prenons un exemple très concret. Imaginons une application web qui affiche une interface fixe, comme une calculatrice, une interface de jeu simple ou un tableau de bord compact. Vous ne voulez surtout pas que l’interface se mette à bouger dès que l’utilisateur commence à scroller ou que la barre d’adresse change de taille. Vous avez besoin de stabilité, d’un cadre fixe. Dans ce cas, utiliser svh est une excellente idée.

Voici une utilisation typique :

.app {
  height: 100svh;
}

Avec ce simple réglage, votre interface s’appuie sur la plus petite hauteur que le viewport peut avoir. Cela permet d’éviter les sauts d’affichage, les compressions soudaines et les effets un peu désagréables qui donnent l’impression que l’interface “respire mal”.

Une autre utilisation très fréquente concerne les écrans d’accueil ou les pages où l’expérience utilisateur doit être très contrôlée. Par exemple, une page de connexion, une page d’erreur ou une page d’introduction. Vous voulez que tout reste stable, propre, sans mouvement inattendu. Les Small Viewport Units sont alors vos alliées.

D’un point de vue pédagogique, on peut voir svh comme l’unité de la prudence. C’est celle qui vous dit : “Je prends la valeur la plus petite, comme ça tu es tranquille, quoi qu’il arrive.” Et parfois, dans la vie comme dans le CSS, la prudence, c’est rassurant. Cela évite bien des surprises, et surtout cela améliore la perception de qualité de votre site.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Beaucoup de développeurs ont déjà vécu ce moment étrange où un utilisateur leur dit : “Sur mon téléphone, ta page tremble quand je descends ou quand j’ouvre le clavier.” Et souvent, ce n’était pas un bug de JavaScript, ni un problème de CSS compliqué. C’était tout simplement la gestion du viewport qui n’était pas adaptée. Avec svh, ce genre de situation devient beaucoup plus rare, et c’est franchement reposant.

Dans votre apprentissage des unités viewport, retenez ceci. Si vous voulez une mise en page stable, qui ne doit pas s’agrandir ou se réduire lorsque le navigateur joue avec ses interfaces, utilisez les Small Viewport Units. Elles font partie des nouvelles unités CSS qui apportent de la sérénité et une meilleure maîtrise.

Les Large Viewport Units : la valeur la plus “confortable” du viewport

Après avoir découvert les unités prudentes, allons maintenant vers leur opposé naturel : les Large Viewport Units, souvent notées lvh et lvw. Celles-ci représentent la plus grande taille que peut atteindre le viewport. Là où les Small Viewport Units considèrent le scénario le plus contraignant, les Large Viewport Units imaginent au contraire le scénario le plus confortable, celui où le navigateur offre le maximum d’espace.

Concrètement, lvh représente la hauteur maximale possible de l’écran visible, lorsque toutes les barres de navigation ont disparu ou sont réduites au minimum. De la même manière, lvw correspond à la largeur maximale. Ces unités sont particulièrement intéressantes lorsque vous souhaitez exploiter le plein potentiel d’espace disponible, notamment pour des designs immersifs ou des sections visuelles très ambitieuses.

Imaginez une grande section hero, avec une image plein écran, un titre imposant, un slogan, peut-être même une animation ou une vidéo de fond. Dans ce contexte, vous voulez généralement que la section occupe le plus d’espace possible, afin d’offrir une expérience impressionnante et immersive. Les Large Viewport Units sont parfaites pour cela.

Voici un exemple très concret :

.hero {
  height: 100lvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Avec ce réglage, votre section hero utilise la hauteur maximale que peut atteindre le viewport. Cela permet d’obtenir un rendu visuel très généreux, stable et agréable, surtout lorsque les barres du navigateur disparaissent au scroll, laissant toute la place à votre contenu.

Les Large Viewport Units sont également utiles dans les situations où vous voulez vous assurer que votre contenu ne sera jamais “étouffé” par une interface temporaire du navigateur. Par exemple, un diaporama pleine page, une galerie photo immersive ou une page de storytelling visuel où chaque écran doit vraiment respirer.

D’un point de vue pédagogique, lvh et lvw sont comme des unités “optimistes”. Elles partent du principe que le navigateur offrira le maximum d’espace possible et elles s’y adaptent. C’est un peu comme si elles disaient : “Profitons du meilleur scénario”. Et parfois, pour l’expérience utilisateur, c’est exactement ce qu’il faut.

Cependant, il est important de comprendre que ces unités viewport ne remplacent pas dvh ou svh. Elles sont complémentaires. Chacune d’elles correspond à une philosophie différente. Là où dvh s’adapte dynamiquement, lvh vise la meilleure situation et svh se prépare à la pire. Et c’est justement cette richesse qui rend ces nouvelles unités CSS si puissantes.

Bien choisir entre dvh, svh et lvh : quelques repères simples

Pour que ce guide vous soit vraiment utile, il faut aller un peu au-delà de la pure théorie. Comprendre les unités viewport, c’est bien. Savoir laquelle utiliser dans un vrai projet, c’est beaucoup mieux. Alors prenons un moment pour clarifier tout cela.

Si vous voulez une zone qui suit exactement ce que l’utilisateur voit à l’instant présent, utilisez dvh ou dvw. C’est l’unité dynamique, celle qui colle à la réalité du moment. Pour une web-app, une interface responsive très interactive ou une zone principale qui doit toujours correspondre à l’écran visible, dvh est souvent la meilleure option.

Si vous voulez une interface stable, qui ne doit pas changer de hauteur en fonction du comportement du navigateur, svh est un excellent choix. C’est particulièrement utile pour des écrans fixes, des pages de connexion, des interfaces de type application ou des zones où toute variation visuelle serait perçue comme un bug.

Enfin, si vous cherchez à exploiter le maximum d’espace, notamment pour des designs immersifs, des sections hero spectaculaires ou des expériences visuelles fortes, lvh est votre meilleur allié. C’est l’unité de la générosité, celle qui tire parti du plein potentiel du viewport.

Une approche très intéressante consiste même à combiner ces unités viewport pour encadrer intelligemment la hauteur d’un élément. Par exemple :

main {
  min-height: 100svh;
  height: 100dvh;
  max-height: 100lvh;
}

Avec ce type de réglage, vous dites littéralement au navigateur : “Essaie d’utiliser la hauteur dynamique, mais ne descends jamais en dessous de la valeur minimale et ne dépasse jamais la valeur maximale”. C’est une manière très élégante d’embrasser complètement la logique moderne des unités CSS viewport et de rendre vos mises en page à la fois souples et contrôlées.

Compatibilité et usage réel dans vos projets

Une question que beaucoup se posent naturellement concerne la compatibilité navigateur. Bonne nouvelle : aujourd’hui, ces nouvelles unités viewport sont très bien supportées par les navigateurs modernes. Chrome, Edge, Safari, Firefox, la grande majorité des environnements récents savent parfaitement interpréter dvh, svh et lvh.

Cela signifie que vous pouvez les utiliser sérieusement dans des projets professionnels, pas seulement dans des expérimentations. Pour un blog, une boutique en ligne, une application web ou un site vitrine moderne, ces unités CSS sont désormais une solution fiable. Elles s’inscrivent dans les standards actuels et représentent clairement l’avenir des unités viewport.

Bien sûr, si vous travaillez sur des environnements extrêmement anciens, il faudra peut-être prévoir des fallback. Mais dans la grande majorité des projets actuels, surtout si vous développez pour des utilisateurs modernes, il n’y a plus vraiment de raison d’avoir peur.

Vers une nouvelle manière de penser les unités CSS

Ce qu’il faut bien comprendre, c’est que ces nouvelles unités viewport ne sont pas simplement des “gadgets” techniques. Elles traduisent une évolution profonde dans la manière dont le web est pensé. Pendant longtemps, nous avons imaginé des écrans fixes, stables, rectangulaires, qui ne changeaient pas de forme. Aujourd’hui, les écrans sont mobiles, adaptatifs, contextuels. Les unités CSS devaient évoluer pour suivre cette réalité.

dvh, svh et lvh ne sont donc pas juste des alternatives à vh. Ce sont des outils de précision, des instruments qui permettent de concevoir des interfaces adaptées à la vraie vie, avec ses contraintes, ses surprises et ses comportements parfois imprévisibles. Et quand on développe pour des utilisateurs réels, c’est exactement ce dont on a besoin.

Tableau récapitulatif des unités viewport CSS

Des unités viewport modernes pour un web plus confortable

Arrivé à ce stade, vous avez désormais une vision complète des nouvelles unités CSS liées au viewport. Vous connaissez les Dynamic Viewport Units comme dvh et dvw, capables de suivre en temps réel la taille visible de l’écran. Vous avez découvert les Small Viewport Units, qui jouent la carte de la prudence, et les Large Viewport Units, pensées pour exploiter le maximum d’espace disponible.

Ce que vous devez retenir, surtout si vous êtes débutant, c’est que ces unités viewport ne sont pas là pour compliquer votre vie. Au contraire, elles sont là pour la simplifier. Elles répondent à des problèmes concrets que les développeurs rencontrent depuis des années. Elles rendent vos sites plus stables, vos interfaces plus confortables et vos utilisateurs plus heureux, même s’ils ne se rendent pas compte de tout ce travail invisible derrière leur écran.

Il y a aussi quelque chose de très motivant là-dedans. Le web évolue, les outils progressent, et en tant que créateur ou développeur, vous évoluez avec lui. Chaque nouvelle notion que vous maîtrisez vous rapproche d’un niveau supérieur de qualité. Et ces nouvelles unités viewport font clairement partie de ces connaissances modernes qui font la différence.

Alors n’hésitez pas à les tester, à jouer avec, à les intégrer dans vos prochains projets. Expérimentez dvh pour vos sections principales, svh pour stabiliser des écrans fixes et lvh pour vos grandes zones immersives. Plus vous les utiliserez, plus elles deviendront naturelles. Et surtout, souvenez-vous d’une chose simple : comprendre les unités CSS, c’est aussi comprendre comment votre site vit à l’intérieur des écrans de vos utilisateurs. Et ça, c’est peut-être l’une des plus belles parties du métier.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr