rem quesako ?
Tu fais du CSS ? Beaucoup de CSS ? Alors ca tombe bien car aujourd’hui, on va voir un truc super sympas ! Le rem ! Alors non, il ne s’agit pas d’une nouvelle sorte de pâte chinoise (enfin je pense) mais d’une unité de mesure au même titre que le pixel… Comme pour le pixel, tu peux utiliser le rem pour définir des tailles pour toutes sortes d’attributs, comme la largeur, la hauteur, la typo, l’épaisseur d’une bordure, les marges, etc…
Le rem ça veut dire root em, donc en gros, tout ce qui est défini avec du rem va dépendre de la taille de font de la balise html, contrairement à l’em qui est basé sur le parent.
La base
Afin de pouvoir commencer à travailler avec les rem, j’ajoute dans mon fichier style le sélecteur html et je définis la propriété font-size avec une valeur de 100% (c’est la valeur qui est généralement choisie). Je mets un h1 avec une font-size de 2rem pour voir un peu ce que ça donne.
html{
font-size: 100%;
}
h1{
font-size: 2rem;
}
Si j’analyse la taille de la typo du h1 avec un outil comme Firebug, cela va me donner la valeur de 32px, ça s’explique par le fait que les navigateurs ont généralement une taille de typo de base qui tourne aux alentours de 16px et comme j’ai mis 100% de font-size dans mon html, ça veut tout simplement dire que 1rem vaut 16px (soit 100% de 16px).
Histoire de bien comprendre, voici deux exemples équivalents, l’un en pixel et le suivant en rem :
h1{
font-size: 32px;
}
p{
font-size: 24px;
}
span{
font-size: 16px;
}
html{
font-size: 100%;
}
h1{
font-size: 2rem;
}
p{
font-size: 1.5rem;
}
span{
font-size: 1rem;
}
Un des avantages à utiliser le rem, c’est qu’à tout moment tu peux réduire ou augmenter la taille de typo, simplement en modifiant le font-size du html et ça peut être pratique pour ajuster des tailles de typo pour certaines tailles d’écrans par exemple.
@media only screen and (max-width:320px){
html{
font-size:62.5%;
}
}
Harmonie
Hormis changer la taille de typo d’un texte, je peux me servir du rem pour d’autres choses, un bouton par exemple, c’est un élément auquel on ajoute systématiquement du padding.
button{
background-color: yellow;
color: black;
padding: 1.5rem;
font-size: 1rem;
}
Je trouve que mettre le padding en rem est assez pratique. Quand je change la valeur de base du rem, la taille de la typo s’adapte, mais celle du padding aussi et c’est quelque chose de chouette car il y a un rapport entre les deux, donc mon bouton aura toujours le même aspect.
Bonne pratique
L’utilisation du rem se fait aussi dans des gros framework CSS comme foundation, voici un exemple de leur wrapper.
div{
width:100%;
max-width:60rem;
margin:0 auto;
}
Et c’est presque le wrapper par excellence, un conteneur centré qui ne peut jamais déborder et dont la largeur maximum à une petite particularité, elle est en rem. C’est ingénieux, pour un utilisateur « normal » le wrapper a une taille max de 960 pixels (60*16), mais pour quelqu’un qui aurait augmenté la taille de la typo de base, à cause de problème de vue par exemple, le bloc serait plus large pour s’adapter au font plus grande, ce qui est tout à fait logique.
A l’avenir je vais essayer d’utiliser de plus en plus cette unité et je te conseille de faire de même.
28/11/2015
Yann Vangampelaere - nouslesdevs -