Blocs de fenêtre d'affichage grands, petits et dynamiques

De nouvelles unités CSS prenant en compte les fenêtres d'affichage sur mobile, avec des barres d'outils dynamiques.

Bramus

Fenêtre d'affichage et ses unités

Pour dimensionner un élément aussi haut que la fenêtre d'affichage, vous pouvez utiliser les unités vw et vh.

  • vw = 1% de la largeur de la fenêtre d'affichage.
  • vh = 1% de la hauteur de la fenêtre d'affichage.

Attribuez à un élément une largeur de 100vw et une hauteur de 100vh, et il couvrira l'intégralité de la fenêtre d'affichage.

Élément bleu clair défini sur 100 vw par 100 vh et recouvrant toute la fenêtre d'affichage. La fenêtre d'affichage elle-même est indiquée à l'aide d'une bordure bleue en pointillés.
Élément bleu clair défini sur une résolution de 100 vw par 100 vh et recouvrant l'intégralité de la fenêtre d'affichage.
La fenêtre d'affichage elle-même est indiquée à l'aide d'une bordure bleue en pointillés.

Les unités vw et vh sont apparues dans des navigateurs avec ces unités supplémentaires

  • vi = 1% de la taille de l'axe intégré de la fenêtre d'affichage.
  • vb = 1% de la taille de l'axe de bloc de la fenêtre d'affichage.
  • vmin = vw ou vh, selon la valeur la plus faible.
  • vmax = vw ou vh, la valeur la plus élevée.

Ces unités sont compatibles avec les navigateurs.

Navigateurs pris en charge

  • 20
  • 12
  • 19
  • 6

La nécessité de nouvelles unités de fenêtre d'affichage

Les blocs existants fonctionnent bien sur les ordinateurs, mais la situation est différente sur les appareils mobiles. La taille de la fenêtre d'affichage est alors influencée par la présence ou l'absence de barres d'outils dynamiques. Il s'agit d'interfaces utilisateur telles que les barres d'adresse et les barres d'onglets.

Bien que la taille de la fenêtre d'affichage puisse changer, les tailles vw et vh ne le font pas. Par conséquent, les éléments dont la hauteur est de 100vh pixels disparaîtront de la fenêtre d'affichage.

100 vh sur mobile, c'est trop élevé en charge.
100 vh sur mobile, c'est trop haut en charge.

Ces barres d'outils dynamiques se retirent lorsque vous faites défiler l'écran vers le bas. Dans cet état, les éléments dont la hauteur est de 100vh couvrent l'ensemble de la fenêtre d'affichage.

100 vh sur mobile est "correct" lorsque l'interface utilisateur user-agent est retirée.
100 vh sur mobile est "correct" lorsque l'interface utilisateur user-agent est retirée.

Pour résoudre ce problème, les différents états de la fenêtre d'affichage ont été spécifiés au sein du groupe de travail CSS.

  • Grande fenêtre d'affichage: taille de la fenêtre d'affichage en supposant que toute interface UA qui est développée et retirée de manière dynamique pour être retirée.
  • Petite fenêtre d'affichage: taille de la fenêtre d'affichage en supposant que toute interface UA qui est développée et rétractée de manière dynamique pour être développée.
Visualisations des fenêtres d'affichage de toutes tailles
Visualisations des grandes et petites fenêtres d'affichage

Des unités sont également attribuées aux nouvelles fenêtres d'affichage:

  • Les unités représentant la grande fenêtre d'affichage comportent le préfixe lv. Les unités sont lvw, lvh, lvi, lvb, lvmin et lvmax.
  • Les unités représentant la petite fenêtre d'affichage comportent le préfixe sv. Les unités sont svw, svh, svi, svb, svmin et svmax.

La taille de ces unités de pourcentage de fenêtre d'affichage est fixe (et donc stable), sauf si la fenêtre d'affichage elle-même est redimensionnée.

Deux visualisations de navigateur mobile placées l'une à côté de l'autre. L'un a un élément de 100 lvh et l'autre de 100 lvh.
Deux visualisations de navigateur mobile placées l'une à côté de l'autre.
L'une comporte un élément de 100 svh et l'autre de 100 lvh.

En plus des fenêtres d'affichage de petite et grande taille, il existe une fenêtre d'affichage dynamique qui prend en compte de façon dynamique l'UI d'UA:

  • Lorsque les barres d'outils dynamiques sont développées, la taille de la fenêtre d'affichage dynamique est égale à la taille de la petite fenêtre d'affichage.
  • Lorsque les barres d'outils dynamiques sont retirées, la fenêtre d'affichage dynamique est égale à la taille de la grande fenêtre d'affichage.

Les unités accompagnées portent le préfixe dv: dvw, dvh, dvi, dvb, dvmin et dvmax. Leurs tailles sont limitées entre leurs équivalents lv* et sv*.

100 dvh s'adapte à la taille de la fenêtre d'affichage, qu'elle soit petite ou grande.
100dvh s'adapte à la taille de la fenêtre d'affichage, qu'elle soit petite ou grande.

Ces unités sont disponibles dans Chrome 108, rejoignant Safari et Firefox, qui sont déjà compatibles.

Navigateurs pris en charge

  • 108
  • 108
  • 101
  • 15,4

Mises en garde

Voici quelques mises en garde concernant les unités de fenêtre d'affichage:

  • Aucune des unités de la fenêtre d'affichage ne tient compte de la taille des barres de défilement. Sur les systèmes sur lesquels les barres de défilement classiques sont activées, un élément dont la taille est 100vw sera donc un peu trop large. conformément aux spécifications.

  • Les valeurs de la fenêtre d'affichage dynamique ne sont pas mises à jour à 60 ips. Dans tous les navigateurs, la mise à jour est limitée à mesure que l'UI d'UA se développe ou se rétracte. Certains navigateurs rejettent même complètement les mises à jour en fonction du geste utilisé (un défilement lent ou un balayage).

  • Le clavier à l'écran (également appelé clavier virtuel) n'est pas considéré comme faisant partie de l'interface utilisateur d'UA. Par conséquent, cela n'affecte pas la taille des unités de la fenêtre d'affichage. Dans Chrome, vous pouvez activer un comportement dans lequel la présence du clavier virtuel affecte les unités de la fenêtre d'affichage.

Ressources supplémentaires

Pour en savoir plus sur les fenêtres d'affichage et ces unités, consultez cet épisode de HTTP 203. Dans celle-ci, Bramus explique à Jake tout ce qu'il y a à savoir sur les différentes fenêtres d'affichage et comment exactement les tailles de ces unités sont déterminées.

Documentation supplémentaire: