post-thumb-rem

L’unité de mesure ‘rem’ en CSS

Le « rem » est une unité de mesure relative utilisée par CSS et qui fonctionne comme le « em » sans les problèmes d’héritage puisqu’elle se réfère à la valeur initiale de l’élément html.

Mais d’abord, c’est quoi le « em » ?

En CSS il existe différentes unités de mesure :

  • le centimètre (cm),
  • le millimètre (mm)
  • le point (pt)
  • le pica (pc)
  • le pixel (px)
  • le cadratin (em)
  • le pourcentage (%)

Ces unités sont utilisées en fonction du média de sortie (écran ou imprimante).

Ainsi pour une sortie papier, nous utiliserons de préférence  le centimètre (cm), le millimètre (mm) ou encore le point (pt) ou le pica (pc) pour la typographie.

Pour un affichage sur écran, on préférera le pixel (px), l’em ou le pourcentage

Absolu ou relatif ?

Les unités dites « absolues » (px, cm, mm, pt, pc) ne seront pas modifiées en fonction des possibilités d’affichage, ce qui est précisément ce que l’on souhaite à l’impression d’un document.
Une police dont la propriété font-size est réglée sur 12 pt fera toujours 12 pt.

L’unité em est dite  valeur « relative « .  C’est à dire qu’elle représente un coefficient multiplicateur de la taille du texte de son parent.

En indiquant une taille de police dans votre code en « em » (font-size: 0.8 em), cela signifie que vous ne souhaitez pas une taille fixe et absolue mais une taille proportionnelle à la taille du texte de son parent.

html {font-size: 10px;}
body {font-size : 0.8em}

Ici la taille du texte du body sera de  0.8 x 10px (la taille par défaut), soit 8 pixels

Il existe une autre unité, l’ex. Rarement utilisée et déconseillée par le W3C, nous n’en parlerons pas ici, mais sachez qu’elle existe.

 

Pourquoi il est préférable d’utiliser des valeurs relatives ?

Les navigateurs disposent d’une fonctionnalité qui permet de changer la taille du texte. Or Internet Explorer avant sa version 9 était incapable de redimensionner des textes dont la taille était définie en pixels. Pour pallier ce problème, en utilisant une valeur exprimée en « em », on autorise le  redimensionnement du texte et ainsi on augmente la lisibilité des textes du site, ce qui constitue une des règles de bases de l’ergonomie des sites web. Sans rentrer dans les détails de l’histoire de cette unité utilisée en imprimerie, retenez juste que la taille d’un ’em’ dépendra de la taille du texte par défaut du navigateur et des tailles de texte précisées dans la feuille de style. Comme la notion peut paraître un peu compliquée, voyons ce que cela donne en pratique.

Un exemple pour y voir plus clair

<body>
<div id="wrap">
    <div id="header-container">
        Mon titre à 3em
       <p>Une baseline de 0.8em</p>
    </div>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis neque purus, non scelerisque sem scelerisque sit amet. Integer nec leo nec nisi aliquam bibendum. 
    </div>    
  </div>
</body>
</html>
html {font-size: 100%;}
body {font-size : 0.8em}
div#header-container {font-size: 3em;}
p.baseline {font-size:0.5em}

Ce qui donne dans un navigateur :

demo-em

Ici le texte du premier div#header-container est 3 fois plus grand (3em) part que la taille définie dans le body (0.8em).
Le texte de la  baseline vaut 0.5 fois  le texte de son parent (header-container). Enfin le contenu de div#content n’ayant pas de taille spécifiée, c’est la valeur du body (0.8em) qui sera appliquée.

Dans la pratique, compte tenu de ce dimensionnement en cascade, les développeurs ont parfois du mal à utiliser cette unité de mesure ayant des difficultés à se représenter ce que va donner leur texte dans leur page web.

L’alternative : « rem »

Il ne s’agit bien sûr pas du célèbre groupe des années 90, mais d’une nouvelle unité qui signifie « root em« .  Elle n’est donc pas proportionnelle à son parent mais à la taille spécifiée pour la balise html.

Si on souhaite utiliser cette unité, On n’oubliera donc pas de réinitialiser la propriété font-size de son tag HTML comme le montre l’exemple ci-dessous.

html {font-size:100%}

Ou encore mieux

html {font-size:62.5%}

La taille par défaut du texte étant de 16px, ce qui est un peu grand, on diminue dès le départ cette valeur à 10px (16 x62.5/100 = 10).

Ensuite toutes les valeurs en « rem » définies dans notre feuille de style seront le pourcentage de cette valeur initiale.

html { font-size: 62.5%; } /* 1rem vaut 10px */
body { font-size: 1.4rem; } /* 1.4 rem vaut 14px */
h1   { font-size: 2.4rem; } /* 2.4 rem vaudra 24px */

On le voit dans l’exemple ci-dessus c’est quand même beaucoup plus simple.

Le rem pour les tailles des textes, mais pas que…

Bien sûr ces unités de mesures relatives (em et rem) ne servent pas uniquement à déterminer la taille de vos textes. Elles sont aussi très utiles pour fixer la taille des  margin et des  padding.  Ainsi si votre internaute décide de zoomer les pages de votre site, les proportions des espacements entre les éléments seront conservés.

Quels navigateurs supportent cette nouvelle unité ?

L’unité « rem » est supporté par Firefox, Chrome, Opera et Internet Explorer à partir de la version 9.

Fallback

Pour les versions antérieures d’IE, on utilisera une solution de secours qui est de définir la propriété  font-size en pixels puis en rem en sachant que IE7 et IE8 ne sauront pas redimensionner le texte.

html { font-size: 62.5%; } 
body { /* =14px */
  font-size: 14px;
  font-size: 1.4rem;
}
h1   { /* =24px */
  font-size: 24px;
  font-size: 2.4rem;
}

D’autres unités  rendent possible de spécifier des tailles relatives à la fenêtre du lecteur.
Ce sont les unités vw et vh.
Le vw est égal à 1/100ème de la largeur de la fenêtre et le vh est égal à 1/100ème de la hauteur de la fenêtre.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *