NSI Rocks !

Les unités en CSS

Les navigateurs modernes prennent en charge un grand nombre d'unités pour dimensionner les éléments d'une page web. Dans une page web, on peut avoir besoin de modifier la taille :

  • du texte
  • des images
  • des différents éléments (menus, en-têtes, etc...)

Toutes les unités ne sont pas systématiquement nécessaires, nous verrons dans cette page celles qui sont les plus utiles dans un premier temps :

  • les pixels (unité : px)
  • l'unité em et surtout rem
  • les pourcentages (unité : %)
De façon générale, les unités absolues sont peu utilisées car elles ne permettent pas aux éléments de s'adapter à la taille de l'écran de l'utilisateur.On peut ajouter que les unités telles que les cm, les mm, pt, pc ne sont quasi jamais utilisées, car elles ne correspondent pas à la réalité d'une page web et donc d'un affichage sur écran.

Accessibilité

Dans les navigateurs, on peut définir la taille de base de la police d'écriture. Cette taille sera alors définie dans l'élément racine de la page web, c'est-à-dire la balise html.

Ainsi, un utilisateur malvoyant qui aurait besoin d'afficher le texte dans une grande taille pourra paramétrer son navigateur.

C'est la raison pour laquelle on évite d'utiliser l'unité px, qui est une unité absolue. Un texte dont on modifie le style pour qu'il soit affiché en 16px sera donc de la même taille sur un navigateur configuré par défaut et sur un navigateur configuré pour une personne malvoyante.
On préfèrera alors l'unité rem.

Trois unités pratiques

Les pixels (px)

Les pixels représentent une unité fixe correspondant à un point sur l'écran. C'est l'une des unités les plus simples à comprendre. Elle est particulièrement utile pour définir des dimensions précises, comme la taille du texte, des bordures ou des marges.

Exemple :

h1 {
  font-size: 24px; /* Taille fixe du texte */
  margin: 10px;    /* Marges fixes autour de l'élément */
}
Cependant, les pixels ne s'adaptent pas automatiquement à la taille de l'écran ou aux préférences d'accessibilité de l'utilisateur.

Les pourcentages (%)

L'unité en pourcentage est relative à un conteneur parent. Elle est idéale pour créer des éléments proportionnels, en particulier dans des mises en page fluides ou responsives.

Exemple :

div {
  width: 50%; /* La largeur de l'élément sera la moitié de celle de son conteneur parent */
}

Les pourcentages sont aussi utilisés pour des propriétés comme la hauteur, les marges ou les paddings.

Les unités relatives : rem (et em)

Les unités relatives permettent une meilleure adaptabilité, car elles dépendent de la taille de la police définie dans le contexte :

différence entre em et rem
  • rem (root em) : relative à la taille de la police définie sur l'élément racine (html).
  • em : relative à la taille de la police de l'élément parent immédiat.

Avantage de rem sur em :rem est plus prévisible, car elle ne dépend que de la taille définie à la racine, tandis que em peut varier selon l'héritage et les éléments imbriqués.

Exemple :

html {
  font-size: 16px; /* Taille de base */
}

h1 {
  font-size: 2rem; /* 2 fois la taille de base (32px) */
}

p {
  font-size: 1rem; /* Égale à la taille de base (16px) */
}

Avec ces unités, il est plus simple d'adapter les éléments à différents écrans et tailles de texte, tout en respectant les principes d'accessibilité.