Les unités de mesure... Quel grand sujet ! Un sujet qui se veut un peu perturbant lorsqu'on commence et qui pourtant est primordial lorsque nous nous lançons dans nos projets. Dans ce petit guide, découvrons ensemble tout ce qu'il faut savoir sur les unités de mesure avec CSS.
Les unités de mesure "old-school"
Parmi toutes les unités de mesure qui s'offrent à nous, nous avons les bonnes vieilles unités traditionnelles, utilisées depuis des dizaines d'années :
px- pour donner une taille en pixels ;%- pour donner une taille dynamique en pourcentage ;cm- pour donner une taille en centimètres (oui c'est possible) ;in- pour donner une taille en pouces (ils ont pensé à nos amis Américains).
Voici pour les principales.
Notez qu'il est déconseillé d'utiliser les unités cm et in et qu'il est recommandé de privilégier les unités de mesure px et % (en ce qui concerne les unités de mesure traditionnelles - nous verrons dans la suite qu'il existe des unités plus intéressantes).
Toutes ces unités sont compatibles avec toutes les propriétés CSS qui peuvent accueillir une taille en pixels comme par exemple :
margin: 5px;
/* ou */
margin: 5%;
/* ou */
margin: 5cm;
/* ou */
margin: 5in;Bien entendu toutes ces valeurs ne donnent pas la même taille.
1 in = 2.54 cm = 96 pixels
Quand vous précisez 5 in, vous aurez donc une taille de 5 x 96 pixels soit 480 pixels. Une taille beaucoup trop grand dans la plupart du temps. C'est pour cette raison que les unités de mesure en cm et en in sont déconseillées, elles ne sont pas assez précises.
Le pixel (px), le centimère (cm) et le pouce (in) sont toutes des unités de mesure absolues, ce qui veut dire qu'une valeur de 1 pixel correspondra toujours à 1 pixel de l'écran. En d'autres termes, nous n'aurons jamais de surprise car un texte qui sera en 16 pixels n'aura pas une taille différente selon l'endroit où il est situé. Ce qui est bien différent pour les unités de mesure em et rem.
Le cas des unités de mesure "em" et "rem"
Maintenant que nous avons bien passé en revu les unités de mesure "traditionnelles", nous vous proposons de faire un point sur les unités de mesure em et rem.
Ces deux unités de mesure sont très souvent sources de confusion, et pour cause : à première vue elles font exactement la même chose... Jusqu'au jour où nous nous rendons compte que la taille que nous avions espéré n'est pas celle que nous voyons sur notre projet.
Mais du coup ? C'est quoi la différence entre
emetrem?
Nous allons vous octroyer un petit indice... Parce qu'on vous aime bien.
rem veut dire root em.
Bon, ça ne vous aide pas, c'est ça n'est-ce pas ? Alors expliquons un peu ce qu'il se passe lorsque nous utilisons l'unité de mesure em pour comprendre en quoi l'unité de mesure rem est intéressante.
.title {
font-size: 3em;
}Dans l'exemple ci-dessus, nous avons déclaré une taille de 3em. Imaginons que nous utilisons cette classe .title sur un paragraphe.
<p class="title">Mon paragraphe principal</p>Savez-vous quelle taille en pixels correspondra à 3em ? La bonne réponse est 48. Oui oui 48 pixels.
Si nous partons du principe que la taille de base de l'élément est de 16 pixels, alors 1 em = 16 px. Donc 3 em = 3x16 = 48 px. Oui, on fait des maths.
Maintenant, disons que nous souhaitons englober notre paragraphe dans une balise main et de dire que le texte est 10 % plus grand avec un font-size: 1.1em.
<main>
<h1 class="title">Mon super site</h1>
</main>main {
font-size: 1.1em;
}
.title {
font-size: 3em;
}Savez-vous quelle taille en pixels correspondra à 3em pour notre titre ? 48 ? Vous auriez tout faux.
Rappelez-vous : 1 em équivaut à la taille de base de l'élément, mais ici, nous héritons de la taille de main donc notre taille est 10 % plus grande à la base !
La taille de base sera donc de 1 em = 17.6 px (10% de 16px donne 1.6px en plus). Donc 3 em = 3x17.6 = 52.8 px. Notre titre est donc 4.8 pixels plus grand que ce que nous avions à la base (10 % de 48 pixels donne bien 4.8 pixels - le compte y est) !
Nous pouvons donc en venir à dire que 1 em correspond à la taille par défaut de l'élément sur lequel nous sommes, la taille héritée. Préciser que nous souhaitons 1.1 em comme taille sur un titre veut donc signifier que nous voulons un titre 10% plus grand que sa taille héritée.
Utiliser l'unité de mesure em est donc très efficace, mais il en résulte un petit souci au niveau de l'héritage par rapport à la taille de base de l'élément. En effet, ce n'est pas vraiment pratique de jongler d'un élément à un autre avec l'unité em, car il suffit qu'on modifie une balise parente pour que les éléments se retrouvent transformés avec des unités plus grandes - ou bien plus petites. Ce qui peut provoquer quelques problèmes et nous faire perdre en souplesse.
Pour cette raison, l'unité rem a été créée. Le fait qu'elle signifie root em veut dire qu'elle va se baser sur l'élément racine de votre site internet, et non plus sur l'élément sur lequel elle est. Ainsi 1 rem prendra donc la valeur de la propriété font-size qui sera définie pour votre balise body ou html. Et n'oubliez pas que body et html ont également une taille standard qui est définit dans les navigateurs, qui équivaut en général à 16 px (selon les préférences de l'utilisateur).
Si nous modifions la classe .title en modifiant em par rem :
.title {
font-size: 3rem;
}Notre paragraphe ainsi que notre titre de niveau 1 auront tous les deux la même taille de 48 pixels (car 1 rem = 16px donc 3 x 16px = 96px) !
Ceci vient nous permettre d'avoir plus de souplesse et de pouvoir spécifier des tailles pour tous nos éléments, basée sur la taille de base de notre projet et sans jamais venir se soucier de modifier un titre h1 en titre h2 ou encore un paragraphe en titre h5 par exemple.
Pourquoi privilégier em ou rem plutôt sur px ?
Nous l'avons découvert : px spécifie une taille fixe (absolue) alors qu'avec les unités em et rem nous spécifions une taille dynamique, basée sur la taille dans les préférences du navigateur.
Mais alors qu'est-ce que ça veut dire ? Pourquoi devons-nous privilégier em ou rem plutôt que px ?
En utilisant em ou rem à la place de px, vous permettez de vous baser sur les préférences de votre utilisateur ainsi que de son navigateur. Un utilisateur qui voit mal voudra aller dans les préférences de son navigateur pour augmenter la taille des sites internet qu'il visite, pour ça, il pourra préciser une taille de base de 19 pixels par exemple. Ce qui veut dire que 1em voudra 19 pixels plutôt que 16 pixels.
Pour rendre votre site plus accessible, il est donc recommandé de privilégier ces unités. Toutefois, rassurez-vous : les sites internet modernes parviennent à modifier également les tailles en pixels, ce n'est plus pas un problème si vous continuez d'utiliser l'unité de mesure px.
Ce qui sera un problème, en revanche, c'est qu'en utilisant des unités en px, vous n'aurez plus autant de souplesse et vous devrez modifier les tailles une par une lorsque vous souhaiterez réduire la taille du texte lorsque vous voudrez faire du responsive design (afin de faire en sorte que votre site puisse être consulté proprement sur tous les navigateurs et tous les écrans).
Avec l'unité de mesure en rem il vous suffira de modifier la propriété font-size de la balise body par exemple, et tous les textes seront réduits ou augmentés, selon ce que vous souhaitez effectuer.
Privilégiez donc le plus possible l'unité em ou rem.
Les nouvelles unités de mesure (vh, vw, vmin, vmax)
Au fur et à mesure, d'autres unités de mesure ont fait leur apparition :
vh- Permet de préciser la hauteur du viewport (de la vue) ;vw- Permet de préciser la largeur du viewport (de la vue) ;vmin- Permet de préciser le viewport minimum ;vmax- Permet de préciser le viewport maximum.
Commençons par voir ensemble les unités vw et vh.
Ces deux unités de mesure sont similaires : leur seule différence vient du fait qu'elles dépendant respectivement de la largeur et de la hauteur du navigateur, ou plutôt de la fenêtre de navigation (c'est-à-dire sans la barre de navigation du navigateur).
- 1vh = 1% de la hauteur du viewport / de la fenêtre de navigation ;
- 1vw = 1% de la largeur du viewport / de la fenêtre de navigation.
Nous utilisons en général l'unité vh pour préciser une hauteur à respecter. Par exemple pour qu'un élément fasse 100% de la hauteur du viewport, nous avions l'habitude de faire comme ceci :
html, body {
min-height: 100%;
}
body .banniere {
height: 100%;
}Et encore nous vous avons fait la version la plus courte, il n'est pas rare que nous devions passer par une grande quantité de balises parentes avant de réussir à préciser la hauteur de notre élément.
Heureusement, maintenant, avec l'unité de mesure vh, ce problème est un loingtain souvenir.
Par exemple voici ce que nous pouvons faire dorénavant :
.banniere {
height: 100vh;
}Notre bannière fera donc 100% de la hauteur du viewport, nous ne devons rien préciser d'autre ! Vous l'aurez donc compris, les unités vw et vh sont très intéressantes pour définir des dimensions basées sur la fenêtre du navigateur, sans nous prendre la taille avec la taille des éléments en parents.
En ce qui est des unités de mesure vmin et vmax, nous retrouvons exactement le même principe.
vmin- Permet de se baser sur la taille minimale du viewport ;vmax- Permet de se baser la taille maximale du viewport.
Ce n'est pas très clair n'est-ce pas ? Partons sur un exemple.
Avec vmin, nous ferons référence au côté de la fenêtre du navigateur qui est la plus petite : si notre site est représenté sur 1500 px de largeur et 1000 px de hauteur, alors vmin fera référence à vh (car la hauteur est plus petite que la largeur).
Avec vmax, si nous reprenons le même exemple nous nous baserons cette fois sur vw (car la largeur est plus grande que la hauteur).
Nous pouvons par exemple préciser :
.title {
font-size: 30vmin;
}Nous aurons ainsi une taille qui correspondra à 30 % du côté le plus petit : 30 vh si la hauteur est plus petite que la largeur, 30 vw si la largeur est plus petite que la hauteur.
L'utilisation des unités de mesure vmin et vmax est assez rare, car elles sont sont intéressantes dans peu de situations.
En général elles sont très intéressantes pour les titres principaux, afin que leurs tailles s'adaptent aux dimensions de l'écrans sans être trop imposantes.
Voici tout ce que nous voulions vous présenter à propos des unités de mesure ! Vous savez désormais tout ce qu'il faut savoir pour les utiliser. Si vous souhaitez en savoir plus sur le HTML et le CSS, nous avons une formation complète dédiée à ces deux langages de programmation. N'hésitez pas non plus à partager cet article à votre entourage sur vos réseaux-sociaux. Merci !