Pourquoi utiliser « em » au lieu de « px » : un exemple concret.

Si vous êtes développeur web, vous avez probablement entendu parler de l’unité « em ». Pendant de nombreuses années, j’ai utilisé l’unité « px » parce que je ne comprenais pas les avantages de l’unité « em ». J’ai appris à les utiliser et je vais vous montrer pourquoi l’unité « em » peut être très utile.

Comment fonctionnent l’unité “em” ?

Le « em » est une unité proportionnelle à la font-size d’un élément, mais qu’est-ce que cela signifie ? Si vous définissez une font-size sur un élément, l’élément courant et les enfants propriétés utilisant « em » seront proportionnelles à la taille de la police. Lorsque vous définissez une font-size, vous obtenez 1em = <font-size de l’élement> , et je vais vous expliquer pourquoi c’est génial ! Dans l’exemple suivant on verra que si margin-bottom vaut 1.5em, il vaudra font-size \* 1.5.

Dans cet exemple, on peut voir quemargin-bottom vaut “font-size x 1.5”

Pourquoi est-ce que c’est intéressant ?

Lorsque vous développez un site web responsive, vous êtes très souvent amené à modifier les paddings, la taille des polices, etc… pour adapter vos pages aux différentes tailles d’écran.
Lorsque vous n’utilisez pas les unités « em », vous devez modifier tous vos styles dans les media queries car ils ne sont pas réactifs : vous devez redéfinir toutes les propriétés CSS pour les différentes tailles d’écran.

Mais que pensez-vous d’avoir un élément HTML qui dépend de la taille de police de votre élément et lorsque vous la changez, votre composant garde les mêmes proportions ? Plutôt sympa non ? Très facile avec quelques propriétés en unités « em » !

Jetons un coup d’œil à un élément très fréquent en HTML : le bouton !

Un bouton aux paddings et border-radius proportionnels à la font-size

Pour avoir un vrai bouton proportionnel, il me suffit de styliser mon bouton avec des unités « em » partout et la magie opère ! Jetons un coup d’œil au code qui se cache derrière.

A proportional button depending of the font-size

Mon bouton a un padding et un border-radius utilisant l’unité « em ». Ils seront donc toujours proportionnels à la taille de la police. Dans le deuxième et le troisième bouton, vous pouvez voir que les boutons ont une taille de police plus grande et que le rayon de la bordure et l’espacement se sont automatiquement agrandis pour faire exactement le même bouton, mais plus grand.

Un outil important pour l’accessibilité

Autre chose importante concernant les “em” c’est qu’ils permettent une meilleure approche en terme d’accessibilité.

Par défaut, les navigateurs appliquent une font-size à l’élément HTMLbody: ce qui veut dire que de base 1em = = (par défaut 16px, en général) . En développant des sites web en se basant sur des “em”, vous allez concevoir des sites adaptés à chacun car certains utilisateurs vont augmenter ou baisser la taille des caractères du navigateur en fonction de leur préférences ou handicaps. Quand vous utilisez les “px” vous forcez la taille du design de vos sites à un certains format sans prendre en compte les préférences de vos utilisateurs.

Pour conclure

L’unité “px” est une unité qui peut-être utilisée mais ne va pas permettre une accessibilité totale pour les utilisateurs et risque de vous contraindre à créer des styles CSS parfois compliqués inutilement. Maitriser pourquoi les “em” sont importants vont vous permettre de construire des sites plus adaptés.