Unités de hauteur et de largeur de la fenêtre dans CSS moderne

Comme je continue de rencontrer des bases de code CSS et des définitions de thèmes qui utilisent uniquement les unités de fenêtre d'affichage traditionnelles vh et vw, j'ai pensé à écrire un article de blog sur les outils puissants dont nous disposons aujourd'hui, cela peut nous faciliter la vie et améliorer notre code CSS.

Les bonnes vieilles unités de visualisation

Pour faire court, depuis de nombreuses années, nous utilisons vh et vw pour définir quelque chose en pourcentage de la hauteur et de la largeur initiales de la fenêtre. Par exemple, si nous voulions remplir de vert toute la fenêtre d'affichage de tous les appareils, nous pourrions procéder comme suit :

.big-fat-green-element {
  background: green;
  height: 100vh;
  width: 100vw;
}

..et cela ferait probablement l'affaire. Mais cela ne fonctionnerait de manière fiable que jusqu'à ce que, pour une raison quelconque, quelque chose affecte la fenêtre visible. Par exemple, la plupart des navigateurs mobiles modernes masqueront une partie ou la totalité du titre et de la barre d'adresse une fois que l'utilisateur commence à faire défiler la page, affectant également la fenêtre d'affichage et rendant notre gros élément vert moins gros.

Les unités de visualisation modernes

De nos jours et dans les dernières spécifications CSS, nous pouvons utiliser en toute sécurité ce que l'on appelle les unités de fenêtre grandes, petites et dynamiques.

Unités à grande fenêtre

Les unités de pourcentage de grande fenêtre (lv*) et les unités de pourcentage de fenêtre par défaut (v*) sont définies par rapport à la taille de la grande fenêtre : la taille de la fenêtre d'affichage en supposant que toutes les interfaces UA qui sont développées et rétractées dynamiquement soient rétractées.

Essentiellement, lvh et lvw nous donnent des unités que nous pouvons utiliser comme pourcentage par rapport à la fenêtre d'affichage lorsque l'interface utilisateur du navigateur est la plus petite et que le contenu du site Web est à son plus grand état. lvh et lvw nous donneront en fait un comportement identique aux unités vh et vw traditionnelles.

Exemple : Un exemple d'utilisation des unités lvh et lvw serait de définir la hauteur et la largeur d'un élément qui doit servir d'arrière-plan pleine page.

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}

Petites unités de fenêtre

Les petites unités de pourcentage de fenêtre d'affichage (sv*) sont définies par rapport à la petite taille de la fenêtre d'affichage : la taille de la fenêtre d'affichage en supposant que toutes les interfaces UA qui sont développées et rétractées dynamiquement soient étendues.

En d'autres termes, svh et sww nous donnent des unités que nous pouvons utiliser pour remplir l'écran lorsque l'interface utilisateur du navigateur est dans son état le plus grand et que le contenu du site Web est dans son état le plus petit.

Exemple : Un bon exemple d'utilisation de l'unité svh serait de définir la hauteur d'une barre inférieure fixe ou d'un en-tête statique.

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

Unités de fenêtre dynamiques

Les unités de pourcentage de fenêtre d'affichage dynamique (dv*) sont définies par rapport à la taille de la fenêtre d'affichage dynamique : la taille de la fenêtre d'affichage prend en compte dynamiquement toutes les interfaces UA qui sont développées et rétractées dynamiquement.

Les tailles des unités de pourcentage de la fenêtre d'affichage dynamique ne sont pas stables même lorsque la fenêtre elle-même est inchangée. L'utilisation de ces unités peut entraîner le redimensionnement du contenu, par ex. pendant que l'utilisateur fait défiler la page. Selon l'usage, cela peut être gênant pour l'utilisateur et/ou coûteux en termes de performances.

Bien que les unités dvh et dvw puissent sembler idéales, les mises en garde notées dans la définition ci-dessus et certains problèmes que j'ai rencontrés lors de leur utilisation dans des éléments défilants m'ont amené à conclure que nous ne devrions les utiliser que dans des situations très spécifiques.

Exemple 1 : Un exemple d'utilisation de dvh serait de définir la hauteur d'un élément de contenu qui doit s'ajuster en fonction des modifications de la fenêtre d'affichage.

/* Main content adjusts dynamically. 
 * Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
  background-color: #895;
  height: calc(100dvh - 10svh); /* Adjust height considering header */
  overflow: auto;
  padding: 10px;
}

Exemple 2 : J'ai eu ce cas la semaine dernière lorsqu'un bug a été signalé concernant un formulaire où, de par sa conception, le défilement était désactivé alors que le formulaire occupait toute la hauteur et la largeur de la fenêtre. Le bug se produisait lorsqu'un utilisateur mobile se concentrait sur une entrée et que le clavier de l'appareil apparaissait. La disposition du formulaire serait alors interrompue. Le correctif consistait à utiliser dvh au lieu de vh pour sa définition de hauteur.

Codepen avec des exemples

Enfin, voici un codepen où vous pouvez voir les unités de visualisation modernes en action. Profitez-en !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!