EM, l’unité du nouveau Web ?

Je relisais un article paru il y a quelque temps sur clagnut il était question de l’unité em. Je remarque souvent que, malheureusement, cette unité n’est pas assez souvent utilisée. Elle est pourtant très intéressante, voyons ça…

Je ne vous apprendrais rien si je vous dis que le web (un peu comme l’univers finalement) est en expansion. Fini les expressions du type Web 2.0, Web 3.0… place au responsive design ! Un site doit être adapté et adaptable sur différents supports mobiles (tablette, téléphone…). Ce qui engendre, pour chaque site, de nouvelle architecture, une nouvelle conception… ce qui peut être lourd à mettre en place si on s’y prend mal.

Comment gagner du temps ?

Généralement, quand on un intègre un site, on utilise l’unité qu’on connait tous : le pixel (px). Le problème avec cette unité, c’est qu’elle n’est pas flexible du tout. Si vous définissez la taille d’un texte, mettons 12px en CSS :

body {
font-size: 12px;
}

Mais plusieurs problèmes vont se poser. Énumérons-les :

1. La taille du texte sera de 12px pour tout le monde. Votre design apparaitra partout de la même manière. C’est très bien. Mais quid de l’accessibilité ?

L’utilisateur à la possibilité de régler dans son navigateur web une certaine taille de police. Exemple, il veut que les sites apparaissent en 20px. Dans les préférences de Firefox par exemple, on peut changer la taille de la police par défaut qui est de 16px. Mais étant donné que vous avez limité la taille à 12px, l’utilisateur ne verra votre texte qu’en 12px donc encore plus petit que ce qu’il à paramétré.

Les personnes utilisent les pixels parce que c’est l’unité qui ressort le plus couramment dans le Web. Les images sont en pixels, et mettre un texte en pixel c’est très simple. Si on n’utilise pas les em c’est parce que ça n’est pas aussi simple que le pixel.

À retenir : Les préférences d’accessibilités des utilisateurs passent en priorité par rapport aux votres. Le client est roi. Sinon vous enfreignez une des règles de l’accessibilité. Pour rester dans le droit chemin, on changera le body qui est la source. Et tout partira de là :

body {
font-size: 100%;
}

2. Si un jour vous devez changer les dimensions de votre site (la taille des textes par exemple) si l’architecture de votre site est lourde, vous avez allez être obligé de revoir chacune de vos règles une par une. Vous finirez par vous tirer les cheveux avant d’avoir fini.

Une question de positionnement

En fait, comme dans le positionnement en CSS (absolute, relative…) l’unité em se réfère toujours à son élément parent. Exemple :

Avec un paragraphe :

<p>Hello World</p>

Je mets une taille de 1 em sur ce paragraphe :

p  {
font-size: 1em;
}

Si on veut connaitre les pixels du paragraphe, on se réfère à son élément parent, dans ce cas-là c’est le body. Là, Il est à 100% n’oubliez pas. Donc 16px (si on considère que l’utilisateur à laissé les réglages par défaut). On dit que la taille est de 1 fois la taille de l’élément parent. Donc là le texte est de 16 px !

Et, quand je mets

p  {
font-size: 2em;
}

La taille est de 2 fois la taille de l’élément parent. Si on fait la conversion 2 x 16 = 32 px .

Maintenant, je veux mettre mon paragraphe à un équivalent de 42px. Règle de calcul toute bête :

 Taille en em = taille en pixel voulu / Taille de l’élément parent en pixel

Donc 42 / 16 = 2.625em

Un paragraphe & un lien :

Un piège maintenant : Si je rajoute dans mon paragraphe un lien

<p>Hello <a href="#">World</a></p>

Et que ma balise pour les liens a déjà une taille (la même que le paragraphe pour simplifier)

p, a {
font-size: 2.625em;
}

Voici ce qui se passe :

Le lien est 2.625 fois plus grand que le paragraphe. Parce que la balise a est dans l’élément p.

Ce qui fait que le paragraphe fait 42 px (2,625 x 16) ; et pour le lien 110px (2.625 x 42)

Une solution ?

Pas vraiment. Vous pouvez ajouter des règles supplémentaires pour contre carrer la règle précédente mais c’est si vous commencez à faire ça à chaque fois, ça risque de devenir un vrai capharnaüm. Si vous en êtes à ce point, autant revenir en pixels. Il faut que vous soyez attentif et organisé dans vos déclarations CSS.

CSS3 : rem

rem supprime ce problème de cascade et se réfère directement à la source : au body (rem veut dire root em). Au final si je fais :

p, a {
font-size: 2.625rem;
}

L’effet de cascade ne sera pas pris en compte, puisque mon paragraphe et mon lien se réfère directement sur le body. Utile, mais malheureusement supporté à partir d’internet explorer 8 attention à son utilisation : http://caniuse.com/#feat=rem

Lien utile :