Comprendre et utiliser les unités rem en CSS –

Les unités CSS ont fait l'objet de plusieurs articles ici sur SitePoint (tels que A Look at Length Units in CSS The New CSS3 Relative Font Sizing Units and The Power of em Units in CSS ). Dans cet article, nous augmentons le nombre en examinant en détail les unités rem qui ont une excellente prise en charge du navigateur et un polyfill si vous avez besoin d'une prise en charge pour ancien IE.

Cet article a été mis à jour en décembre 2019 pour refléter l'état actuel du dimensionnement des unités rem avec CSS. Pour plus d'informations sur les polices CSS et les propriétés de texte, lisez notre livre, CSS Master, 2nd Edition .

Que sont les unités rem?

Vous avez peut-être déjà rencontré le terme «REM» avant d'écouter le la radio ou votre lecteur de musique. Contrairement à leurs homologues musicaux, nommés pour le «Rapid Eye Movement» pendant le sommeil profond, dans CSS rem signifie «root em». Ils ne vous feront pas perdre votre religion ni croire en un homme sur la lune. Ce qu'ils peuvent faire, c'est vous aider à obtenir une conception harmonieuse et équilibrée.

Selon la spécification W3C la définition d'une unité rem est:

Égal à la valeur calculée de la police . taille sur l'élément racine. Lorsqu'elles sont spécifiées dans la propriété de taille de police de l'élément racine, les unités rem font référence à la valeur initiale de la propriété.

Cela signifie que 1rem est égal à la taille de police de html élément (qui, pour la plupart des navigateurs, a une valeur par défaut de 16 pixels).

Rem Units vs. Em Units

Le principal problème avec les unités em est qu'elles sont relatives à la taille de police de leur propre élément . En tant que tels, ils peuvent cascader et provoquer des résultats inattendus. Prenons l'exemple suivant, où nous voulons que les listes aient une taille de police de 12px dans le cas où la taille de police racine est la valeur par défaut 16px :

 html {
taille de police: 100%;
}

ul {
taille de police: 0.75em;
} 

Si nous avons une liste imbriquée dans une autre liste, la taille de police de la liste interne sera de 75% de la taille de son parent (dans ce cas 9px ). Nous pouvons toujours surmonter ce problème en utilisant quelque chose dans ce sens:

 ul ul {
taille de police: 1em;
} 

Cela fait l'affaire, mais nous devons encore faire très attention aux situations où l'imbrication est encore plus profonde.

Avec les unités rem, les choses sont plus simples:

 html {
taille de police: 100%;
}

ul {
taille de police: 0,75rem;
} 

Comme toutes les tailles sont référencées à partir de la taille de la police racine, il n'est plus nécessaire de couvrir les cas d'imbrication dans des déclarations distinctes.

Dimensionnement des polices avec unités Rem

L'un des pionniers de l'utilisation des unités rem pour la taille des polices est Jonathan Snook avec son article Dimensionnement des polices avec REM en mai 2011. Comme beaucoup d'autres développeurs CSS, il a dû faire face aux problèmes que les unités em apportent dans les mises en page complexes.

temps, les anciennes versions d'IE avaient encore de grandes parts de marché et ils n'étaient pas en mesure de zoomer le texte qui était dimensionné avec des pixels. Cependant, comme nous l'avons vu précédemment, il est très facile de perdre la trace de l'imbrication et d'obtenir des résultats inattendus avec les unités em.

Le principal problème avec l'utilisation de rem pour le dimensionnement des polices est que les valeurs sont quelque peu difficiles à utiliser. Voyons un exemple de certaines tailles de police courantes exprimées en unités rem, en supposant, bien sûr, que la taille de base est 16px:

• 10px = 0,625rem
• 12px = 0,75rem
• 14px = 0,875rem
• 16px = 1rem (base)
• 18px = 1,125rem
• 20px = 1,25rem
• 24px = 1,5rem
• 30px = 1,875rem
• 32px = 2rem

Comme nous pouvons le voir, ces valeurs ne sont pas très pratiques pour effectuer des calculs. Pour cette raison, Snook a utilisé une astuce appelée " 62,5% ". Ce n'était en aucun cas une nouvelle découverte, car elle était déjà utilisée avec des unités em:

 body {font-size: 62,5%; } / * = 10 px * /
h1 {taille de police: 2.4em; } / * = 24px * /
p {taille de police: 1.4em; } / * = 14px * /
li {taille de police: 1.4em; } / * = 14px? * / 

Comme les unités rem sont relatives à l'élément racine, la variante de Snook de la solution devient:

 html {font-size: 62,5%; } / * = 10 px * /
body {font-size: 1.4rem; } / * = 14px * /
h1 {taille de police: 2.4rem; } / * = 24px * / 

Il fallait également tenir compte des autres navigateurs qui ne prenaient pas en charge rem. Ainsi, le code ci-dessus aurait en fait été écrit de cette façon:

 html {
taille de police: 62,5%;
}

corps {
taille de police: 14px;
taille de police: 1.4rem;
}

h1 {
taille de police: 24px;
taille de police: 2.4rem;
} 

Bien que cette solution semble être proche du statut de «règle d'or», il y a des gens qui déconseillent de l'utiliser aveuglément. Harry Roberts écrit sa propre vision de l'utilisation des unités rem . À son avis, bien que la solution 62,5% facilite le calcul (comme les tailles de police en px sont 10 fois leurs valeurs rem), elle finit par obliger les développeurs à réécrire explicitement toutes les polices

Une troisième vue vient de Chris Coyier de CSS-Tricks. Sa solution utilise les trois unités que nous avons rencontrées jusqu'à présent. Il conserve la taille racine définie dans px les modules définis avec des unités rem et les éléments à l'intérieur des modules dimensionnés avec em. Cette approche facilite la manipulation de la taille globale, qui met à l'échelle le type dans les modules, tandis que le contenu du module est mis à l'échelle en fonction de la taille de police du module lui-même. Louis Lazaris a discuté de ce dernier concept dans The Power of em Units in CSS .

Dans l'exemple ci-dessous, vous pouvez voir à quoi ressemblerait l'approche de Chris:

Voir le stylo One Method for Using ems et rems en CSS par SitePoint ( @SitePoint ) sur CodePen .

En pratique, il existe des cadres majeurs tels que Bootstrap 4 et les directives Material Design qui utilisent des unités rem pour dimensionner le contenu du texte.

Une mention spéciale va à Material-UI une collection très populaire de composants React. Non seulement ils dimensionnent le texte de la même manière, mais ils offrent également un mécanisme pour mettre en œuvre la "simplification 10px" que nous avons mentionnée ci-dessus.

Un autre projet récent, Every Layout combine des unités em et rem dans façon inspirée. Il se rapproche le plus du contour du modèle de Chris Coyier plus tôt et il utilise des unités em pour souligner les éléments en ligne comme les icônes SVG, les étendues ou d'autres éléments similaires.

Comme vous pouvez le voir, il n'y a pas de solution miracle. Les combinaisons possibles ne sont limitées que par l'imagination des développeurs.

L'utilisation des unités em ou rem dans les requêtes multimédias est étroitement liée à la notion de «longueur de ligne optimale» et à la manière dont elle influence l'expérience de lecture. En septembre 2014, Smashing Magazine a publié une étude approfondie sur la typographie Web intitulée Size Matters: Balancing Line Length and Font Size In Responsive Web Design . Parmi beaucoup d'autres choses intéressantes, les articles donnent une estimation de la longueur de ligne optimale: entre 45 et 75-85 caractères (espaces et ponctuation compris), avec 65 la valeur cible «idéale».

En utilisant une estimation approximative de 1rem = 1caractère , nous pouvons contrôler le flux de texte pour une seule colonne de contenu, dans une approche mobile-first:

 .container {
largeur: 100%;
}

@media (min-width: 85rem) {
.récipient {
largeur: 65rem;
}
} 

Il existe cependant un détail intéressant à propos des unités rem et em lorsqu'elles sont utilisées comme unités pour les requêtes multimédias: elles conservent toujours la même valeur de 1rem = 1em = taille de police définie par le navigateur. La raison de ce comportement est expliquée dans la spécification de requête de média (non souligné dans l'original):

Les unités relatives dans les requêtes de média sont basées sur la valeur initiale, ce qui signifie que les unités ne sont jamais basées sur les résultats des déclarations. Par exemple, en HTML, l'unité em est relative à la valeur initiale de la taille de police, définie par l'agent utilisateur ou les préférences de l'utilisateur, pas de style sur la page .

Voyons un rapide exemple de ce comportement:

Voir la démo de requête de médias sur CodePen

Premièrement, dans notre HTML, nous avons un élément où nous écrirons la largeur de la fenêtre d'affichage:

 Largeur du document:  px 

Ensuite, nous avons deux requêtes multimédias, l'une avec des unités rem et l'autre avec des unités em (cela utilise Sass pour plus de simplicité):

 html {
taille de police: 62,5%; / * 62,5% de 16px = 10px * /

@media (min-width: 20rem) {
/ * 20 * 16 px = 320 px * /
couleur de fond: lemonchiffon;
taille de police: 200%;
/ * 200% de 16px = 32px * /
}

@media (min-width: 30em) {
/ * 30 * 16 px = 480 px * /
couleur de fond: bleu clair;
taille de police: 300%; / * 300% de 16px = 48px * /
}
} 

Enfin, nous utilisons un peu de jQuery pour afficher la largeur de la fenêtre d'affichage sur la page, en mettant à jour la valeur lorsque la taille de la fenêtre change:

 $ ('span'). Text ($ (window) .width () );

$ (fenêtre) .on ('resize', fonction (e) {
$ ('span'). text ($ (window) .width ());
}); 

Nous commençons par l'astuce 62,5% pour montrer que la taille de police racine modifiée n'a aucun effet sur les valeurs utilisées pour les requêtes multimédias. Lorsque nous modifions la largeur de la fenêtre du navigateur, nous pouvons voir que la première requête multimédia entre en action à 320 pixels (20 × 16 pixels) tandis que la seconde devient active à 480 pixels (30 × 16 pixels). Aucun des changements de taille de police que nous avons déclarés n'a eu d'effet sur les points d'arrêt. La seule façon de modifier les valeurs de point d'arrêt de requête multimédia consiste à modifier la taille de police par défaut dans les paramètres du navigateur.

Pour cette raison, cela n'a pas vraiment d'importance si nous utilisons des unités em ou rem pour les points d'arrêt de requête multimédia. La Fondation Zurb (actuellement à la version 6.5.3 au moment où cela a été écrit) utilise des unités em dans les requêtes des médias.

La quête de l'accessibilité

Nous avons vu ci-dessus que la capacité de l'échelle basée sur la taille de la police racine rend les unités rem très utiles pour l'accessibilité. Les développeurs de Google recommandent d'utiliser des unités relatives pour le dimensionnement du texte .

Une étude empirique menée par les personnes derrière Internet Archive montre qu'un nombre important d'utilisateurs modifient leur taille de police par défaut dans les paramètres du navigateur. En utilisant rem et d'autres unités relatives, vous respectez les décisions des utilisateurs quant à la manière dont ils souhaitent naviguer sur le Web.

Utilisation des unités rem pour la mise à l'échelle des documents

Une troisième utilisation que nous pouvons trouver pour les unités rem consiste à créer des composants évolutifs. En exprimant les largeurs, les marges et le remplissage en unités rem, il devient possible de créer une interface qui s'agrandit ou se rétrécit en accord avec la taille de la police racine. Voyons comment cela fonctionne à l'aide de quelques exemples.

Utilisation des unités rem pour la mise à l'échelle des documents Démo # 1

Dans ce premier exemple, nous modifions la taille de la police racine à l'aide de requêtes multimédias. Tout comme dans la section précédente, le but est de personnaliser l'expérience de lecture pour l'appareil utilisé. Comme les valeurs de remplissage et les marges des éléments sont exprimées en utilisant rem, le composant entier évolue avec la taille du périphérique.

Voyons un autre:

Voir le stylet Dimensionnement dynamique des modules avec unités Rem par SitePoint ( @SitePoint ) sur CodePen .

Dans le deuxième exemple, nous faisons la même modification en utilisant JavaScript. Cette fois, l'utilisateur a le contrôle de la taille de l'interface, l'ajustant en fonction de ses besoins. Ajoutez un moyen de stocker ces valeurs personnalisées (en utilisant soit une base de données, des cookies ou un stockage local) et vous avez la base d'un système de personnalisation basé sur les préférences des utilisateurs.

Conclusion

Nous terminons ici notre rencontre avec les unités CSS rem. Il est évident qu'il existe de nombreux avantages à utiliser ces unités dans notre code, comme la réactivité, l'évolutivité, une meilleure expérience de lecture et une plus grande flexibilité dans la définition des composants. Les unités Rem ne sont pas une solution miracle universelle mais, avec un déploiement soigneux, elles peuvent résoudre de nombreux problèmes qui ont irrité les développeurs depuis des années. C'est à chacun de nous de libérer le plein potentiel des rems. Démarrez vos éditeurs, expérimentez et partagez vos résultats avec le reste d'entre nous.

Tirez le meilleur parti de votre texte en comprenant ce que vous pourriez faire de plus avec les valeurs CSS de texte. Dans notre screencast AtoZ CSS: texte et typographie nous explorerons les propriétés du texte, les propriétés des polices, etc.

Ce n'est pas La fin du monde tel que nous le connaissons c'est plutôt un autre chemin sur le chemin qui fait les développeurs frontaux " Shiny Happy People ".

Adrian est un développeur front-end et un passionné d'UX basé à Dublin , Irlande. Il se concentre sur l'architecture CSS, la conception de sites Web réactifs et les performances de sites Web. Il croit qu'il faut redonner à la communauté, être impliqué dans l'organisation de trois rencontres locales et il a commencé à parler lors d'événements internationaux. Pendant les temps libres, il aime jouer à des jeux vidéo et bricoler avec des versions personnalisées de PC.