svh, lvh et dvh : les unités de viewport CSS, mesurées dans votre navigateur

Ce que sont les unités de viewport

Une unité de viewport est un pourcentage du viewport écrit comme une longueur : 100vh vaut donc toute la hauteur et 50vw la moitié de la largeur. Ce que presque personne ne réalise, c’est combien il en existe : vingt-quatre. Six axes — largeur, hauteur, les deux axes logiques du sens de l’écriture, et la plus petite et la plus grande des deux — multipliés par quatre idées différentes de ce qu’est le viewport.

Ces quatre-là sont le cœur du sujet. Le petit viewport, c’est l’espace dont vous disposez quand toute l’interface rétractable du navigateur est affichée. Le grand, c’est l’espace quand tout est rétracté. Le dynamique, c’est ce qui est vrai à cet instant. Et la quatrième est la famille sans préfixe que vous employez déjà, vh et vw, qui n’est pas une cinquième mesure : elle est définie comme identique à la grande.

D’où le fait que ces unités arrivent par ensemble : svh, lvh et dvh à côté du simple vh, et de même sur chaque axe. Elles ont atterri dans les navigateurs en même temps, ce qui explique aussi qu’un navigateur assez ancien pour ignorer l’une les ignore toutes les trois.

Comment s’en servir

1. Lisez les quatre hauteurs. Elles sont mesurées dans votre navigateur au chargement, en disposant un élément dans chaque unité et en relisant ce que cela donne. Rien n’est cherché dans un tableau : les nombres décrivent l’appareil que vous tenez.
2. Regardez l’écart. La ligne suivante vaut grand moins petit : l’interface du navigateur qui disparaît dès que le défilement commence. Sur une fenêtre de bureau elle vaut le plus souvent zéro, et c’est exactement pour cela que le problème reste invisible jusqu’à ce que quelqu’un ouvre la page sur un téléphone.
3. Faites défiler, sur un téléphone. La ligne dynamique change à mesure que la barre se rétracte et revient, et les constats indiquent à quelle extrémité elle se trouve. Ce mouvement, c’est la spécification appliquée telle qu’elle a été conçue — et c’est aussi pourquoi les unités dynamiques ne sont pas gratuites.

100vh est le viewport haut, et c’est voulu

Le récit universel veut que 100vh soit cassé sur mobile : que les navigateurs s’y prennent mal, que la barre d’adresse gâche tout, qu’il faille un contournement en JavaScript. Le récit est inversé. La spécification CSS définit les unités du grand viewport et les unités sans préfixe par rapport au grand viewport : le viewport dimensionné comme si toute interface qui s’ouvre et se rétracte était rétractée. Autrement dit, 100vh vaut 100lvh, délibérément, et depuis toujours.

La spécification énonce la conséquence dès le paragraphe suivant, sans détour : lorsque ces éléments rétractables sont affichés, ils peuvent masquer un contenu dimensionné ou positionné avec ces unités. Ce n’est pas un rapport de bug, c’est l’explication du choix. Les unités sans préfixe vous laissent remplir l’écran entièrement, et le prix à payer est qu’une barre peut se poser sur ce que vous y avez mis.

Ce qui fait de svh l’unité que presque tous ceux qui tapent vh voulaient réellement. La spécification la décrit comme remplissant l’écran sans qu’aucun de ses contenus soit masqué lorsque tous les éléments d’interface dynamiques sont affichés — puis, dans la même phrase, qualifie les petites unités de plus sûres en général tout en avertissant qu’elles peuvent ne pas donner la plus belle mise en page une fois la barre repliée. Plus sûr et un peu plus vide : voilà l’échange, et il est écrit dans la norme plutôt que découvert dans un gestionnaire de tickets.

La mesure ci-dessus est la version honnête de cette affirmation. Plutôt que d’assurer que votre navigateur respecte la définition, la page le lui demande : si vh et lvh reviennent égaux, c’est la spécification qui fonctionne ; et si un jour ils ne le sont pas, l’outil le dit et le signale comme le seul résultat de cette page qui relèverait d’un défaut du navigateur et non d’une propriété de votre appareil.

Les unités dynamiques ne sont pas un progrès gratuit

Si svh est un peu trop court et vh un peu trop long, dvh paraît la réponse évidente, et parfois elle l’est. La spécification est inhabituellement franche sur son coût : les tailles des unités dynamiques ne sont pas stables même à viewport inchangé, et leur usage peut faire changer de taille le contenu pendant que l’utilisateur fait défiler la page — ce qui, poursuit-elle, peut être perturbant pour l’utilisateur et coûteux en performance.

Un détail explique en outre pourquoi deux téléphones peuvent se comporter différemment sur la même page. Qu’une interface qui se rétracte modifie toutes les unités d’un coup, ou qu’elle apparaisse seulement comme l’écart entre la petite et la grande taille, dépend largement du navigateur. La norme borne les deux extrémités — ce qui survient à cause du défilement doit relever du second cas, et ce qui a un état assez stable pour qu’une remise en page profite au lecteur doit relever du premier — mais entre ces deux règles il reste de la place pour que les navigateurs divergent, et ils divergent.

Les unités dynamiques s’accompagnent d’une autre permission qu’il vaut mieux connaître avant de compter sur un comportement fluide : un navigateur n’est pas tenu de les animer pendant qu’une interface s’ouvre ou se rétracte, et peut les calculer comme si elle était entièrement ouverte ou entièrement fermée durant ce laps de temps. La recommandation est de la supposer rétractée. Si la ligne dynamique de cette page saute au lieu de glisser, c’est donc un choix conforme et non un raté.

Ce que ceci ne peut pas vous dire

La limite la plus importante vient de la spécification elle-même, et non d’une découverte de notre part. Certaines interfaces de navigateur recouvrent le contenu à dessein et ne provoquent aucun décalage de mise en page — et n’ont donc aucun effet sur les longueurs de viewport. svh est donc plus sûr que vh sans être une garantie : un recouvrement de ce type se pose sur un élément parfaitement dimensionné en svh, et aucun de ces nombres ne le mentionnera jamais.

La mesure décrit ce navigateur, cette fenêtre et cet instant. Faites pivoter l’appareil, ouvrez un clavier, passez en plein écran ou installez un autre navigateur et les valeurs changent — c’est bien le propos, mais cela signifie qu’on ne déduit pas le comportement d’un téléphone depuis un ordinateur portable. Si la ligne d’écart indique que rien ne se rétracte, c’est une affirmation vraie sur la fenêtre où vous êtes et qui ne dit rien de celle des autres.

Une chose que la page ne fait volontairement pas : recommander une unité. Laquelle convient dépend de savoir si un élément ne doit jamais être recouvert, ne doit jamais laisser de vide, ou doit toujours tenir exactement — trois exigences distinctes qu’aucun outil ne peut trancher à votre place. Ce qu’il peut faire, c’est montrer la taille de l’écart sur du matériel réel, pour que le choix se fasse face à un nombre plutôt qu’à une intuition.

Enfin, ceci mesure des unités, pas des mises en page. Une section qui déborde peut le faire à cause de l’unité, ou d’une marge, d’un en-tête fixe, d’une barre de défilement dont l’unité ignore tout. Si les nombres ci-dessus vous semblent justes et que votre page déborde encore, l’unité n’est pas coupable.

Pourquoi est-ce gratuit ?

La mesure s’exécute dans votre navigateur : la page dispose un élément masqué dans chaque unité et lit le résultat. Aucun serveur n’intervient : rien à facturer, aucun compte à créer.

Rien n’est envoyé et rien n’est conservé. Ces nombres n’existent que dans votre onglet, et recharger la page les remesure de zéro.