Un démarrage rapide –

Cela fait quelques années que les unités de fenêtres ont été introduites pour la première fois dans CSS. Ce sont vraiment des «unités de longueur réactives» dans le sens où leur valeur change à chaque fois que le navigateur se redimensionne. Si vous avez déjà entendu parler de ces unités mais que vous ne les avez jamais apprises en détail, cet article peut vous aider.

Les unités et leur signification

Il existe quatre unités basées sur des fenêtres en CSS. Ce sont vh vw vmin et vmax .

• Hauteur de la fenêtre d'affichage (vh). Cette unité est basée sur la hauteur de la fenêtre. Une valeur de 1vh est égale à 1% de la hauteur de la fenêtre d'affichage.
• Largeur de la fenêtre d'affichage (vw). Cette unité est basée sur la largeur de la fenêtre. Une valeur de 1vw est égale à 1% de la largeur de la fenêtre d'affichage.
• Minimum de fenêtre d'affichage (vmin). Cette unité est basée sur la dimension plus petite de la fenêtre d'affichage . Si la hauteur de la fenêtre d'affichage est inférieure à la largeur la valeur de 1vmin sera égale à 1% de la hauteur de la fenêtre d'affichage. De même, si la largeur de la fenêtre est inférieure à la hauteur la valeur de 1vmin sera égale à 1% de la largeur de la fenêtre.
• Maximum de la fenêtre (vmax) . Cette unité est basée sur la plus grande dimension de la fenêtre d'affichage . Si la hauteur de la fenêtre d'affichage est supérieure à la largeur la valeur de 1vmax sera égale à 1% de la hauteur de la fenêtre d'affichage. De même, si la largeur de la fenêtre d'affichage est supérieure à la hauteur la valeur de 1vmax sera égale à 1% de la largeur de la fenêtre d'affichage.

Voyons quelle est la valeur de ces unités sera dans différentes situations:

• Si la fenêtre d'affichage a une largeur de 1200 pixels et une hauteur de 1000 pixels, la valeur de 10vw sera de 120px et la valeur de 10vh sera de 100px. Étant donné que la largeur de la fenêtre est supérieure à sa hauteur, la valeur de 10vmax sera de 120 pixels et la valeur de 10 vmin sera de 100 pixels.
• Si l'appareil est maintenant tourné de manière à que la fenêtre devient large de 1000 pixels et haute de 1200 pixels, la valeur de 10vh sera de 120px et la valeur de 10vw sera de 100px. Fait intéressant, la valeur de 10vmax sera toujours de 120 pixels car elle sera désormais déterminée en fonction de la hauteur de la fenêtre d'affichage. De même, la valeur de 10vmin sera toujours de 100 pixels.
• Si vous redimensionnez la fenêtre du navigateur afin que la fenêtre d'affichage atteigne 1000 pixels de large et 800 pixels de haut, la valeur de 10vh deviendra 80 pixels. et la valeur de 10vw deviendra 100px. De même, la valeur de 10vmax deviendra 100px et la valeur de 10vmin deviendra 80px.

À ce stade, les unités de la fenêtre d'affichage peuvent sembler similaires à des pourcentages. Cependant, ils sont très différents. Dans le cas des pourcentages, la largeur ou la hauteur de l'élément enfant est déterminée par rapport à son parent. Voici un exemple:

Comme vous pouvez le voir, la largeur du premier élément enfant est définie pour être égale à 80% de la largeur de son parent. Cependant, le deuxième élément enfant a une largeur de 80 Vw, ce qui le rend plus large que son parent.

Applications des unités de fenêtre

Comme ces unités sont basées sur les dimensions de la fenêtre, il est très pratique de les utiliser dans des situations où la largeur , la hauteur ou la taille des éléments doit être définie par rapport à la fenêtre d'affichage.

Images ou sections d'arrière-plan plein écran

Il est très courant de définir des images d'arrière-plan sur des éléments qui recouvrent entièrement l'écran. De même, vous voudrez peut-être concevoir un site Web où chaque section individuelle sur un produit ou service doit couvrir la totalité de l'écran. Dans de tels cas, vous pouvez définir la largeur des éléments respectifs sur 100% et définir leur hauteur sur 100vh.

Par exemple, prenez le code HTML suivant:

  
 a 

Vous pouvez obtenir un section d'image d'arrière-plan pleine largeur utilisant le CSS ci-dessous:

 .fullscreen {
  largeur: 100%;
  hauteur: 100vh;
  rembourrage: 40vh;
}

.une {
  fond: url ('chemin / vers / image.jpg') centre / couverture;
}

Les images de la première première et deuxième sont tirées de Pixabay.

Créez des titres parfaitement adaptés

Le FitText plug-in jQuery peut être utilisé pour redimensionnez les titres de manière à ce qu'ils occupent toute la largeur de l'élément parent. Comme nous l'avons mentionné précédemment, la valeur des unités de fenêtre change directement en fonction de la taille de la fenêtre. Cela signifie que si vous utilisez des unités de fenêtre pour définir la taille de police pour vos en-têtes, elles s’adapteront parfaitement à l’écran. Chaque fois que la largeur de la fenêtre d'affichage change, le navigateur redimensionne automatiquement le texte du titre de manière appropriée. La seule chose que vous devez faire est de déterminer la bonne valeur initiale pour la taille de police en termes d'unités de fenêtre.

Un problème majeur avec la définition de la taille de police cette est que la taille du texte variera considérablement en fonction de la fenêtre d'affichage . Par exemple, une taille de police de 8vw calculera à environ 96 pixels pour une largeur de fenêtre d'affichage de 1200 pixels, 33 pixels pour une largeur de fenêtre d'affichage de 400 pixels et 154 pixels pour une largeur de fenêtre d'affichage de 1920 pixels. Cela peut rendre la police trop grande ou trop petite pour qu'elle soit correctement lisible. Vous pouvez en savoir plus sur le dimensionnement correct du texte à l'aide d'une combinaison d'unités avec la fonction calc () dans cet excellent article sur la typographie basée sur les unités de la fenêtre .

Facilement centrer Vos éléments

Les unités de fenêtre peuvent être très utiles lorsque vous souhaitez placer un élément exactement au centre de l'écran de votre utilisateur. Si vous connaissez la hauteur de l'élément, il vous suffit de définir la valeur supérieure et inférieure de la propriété margin pour qu'elle soit égale à [(100 - height)/2] vh :

 .centered {
  largeur: 60vw;
  hauteur: 70vh;
  marge: 15vh auto;
}

Cependant, de nos jours, nous pouvons utiliser Flexbox ou CSS Grid pour centrer des éléments, à la fois verticalement et horizontalement.

Choses à garder à l'esprit

Si vous décidez d'utiliser des unités de fenêtre dans vos projets, il y a quelques choses que vous

Soyez prudent lorsque vous définissez la largeur d'un élément à l'aide d'unités de fenêtre. En effet, lorsque la propriété overflow sur l'élément racine est définie sur auto les navigateurs supposent que les barres de défilement n'existent pas. Cela rendra les éléments légèrement plus larges que prévu. Considérez le balisage avec quatre éléments div dont le style est le suivant:

 div {
  hauteur: 50vh;
  largeur: 50vw;
  flotteur: gauche;
}

Normalement, vous vous attendez à ce que chaque div occupe un quart de l'écran disponible. Cependant, la largeur de chaque div est calculée en supposant qu'il n'y a pas de barre de défilement. Cela rend les éléments div légèrement plus larges que la largeur requise pour qu'ils apparaissent côte à côte.

La définition de la largeur des divs de 50vw à 50% résoudra ce problème. La conclusion est que vous devez utiliser des pourcentages lors de la définition de la largeur des éléments de bloc afin que les barres de défilement n'interfèrent pas avec le calcul de leur largeur.

Un problème similaire peut également se produire sur les appareils mobiles en raison de la barre d'adresse qui peut apparaître ou disparaître selon que l'utilisateur défile ou non. Cela modifiera la hauteur de la fenêtre d'affichage et l'utilisateur remarquera des sauts soudains lors de l'affichage du contenu.

Prise en charge du navigateur

D'après les données disponibles sur Caniuse il semble que tous les principaux navigateurs prennent en charge ces unités. Cependant, il y a encore quelques bogues et problèmes que vous devez connaître lors de l'utilisation des unités de fenêtre. Par exemple, dans Firefox, il existe un bogue documenté où 100vh n'a aucun effet sur aucun élément avec sa propriété d'affichage définie sur la table . Encore une fois, Chrome ne prend pas en charge les unités de fenêtre pour les largeurs de bordure, les espaces entre les colonnes, les valeurs de transformation, les ombres de boîte ou dans calc () jusqu'à la version 34. Consultez Caniuse pour une liste complète des bogues connus.

Conclusion

Dans cet article, nous avons brièvement couvert la signification, les applications et la prise en charge du navigateur des unités de fenêtre. Si vous connaissez d'autres applications ou problèmes de navigateur intéressants par rapport à ces unités, pourquoi ne pas nous en parler dans les forums

Faites passer vos compétences CSS au niveau supérieur avec notre livre CSS Master, 2nd Edition par Tiffany B. Brown – couvrant les animations CSS, les transitions, les transformations et bien plus encore.