Cours CSS / Couleurs et unités : px, em, rem et pourcentages

Les couleurs CSS peuvent être écrites en utilisant des noms, des valeurs hexadécimales et des fonctions telles que rgb(). Les unités de longueur utilisent différents points de référence : px est une longueur CSS absolue, em dépend de la taille de la police, rem utilise la taille de la police racine, et les pourcentages dépendent de la propriété définie.

Comparer les noms de couleur, la notation hexadécimale et RGB

teal, #008080, et rgb(0, 128, 128) expriment la même couleur. Les noms de couleurs sont faciles à lire, mais il existe des noms définis qui peuvent être utilisés, et l'hexadécimal et le RGB sont bons pour contrôler numériquement la quantité de rouge, vert et bleu. RGB vient de l’anglais Red, Green, Blue (rouge, vert, bleu).

L'alpha décrit l'opacité de la couleur : 20% laisse beaucoup de la couleur sous-jacente apparaître, tandis que 100% est opaque. Le résultat affiché dépend de cette couleur sous-jacente. Ajouter l'alpha uniquement au fond diffère de la définition de opacity sur l'ensemble de l'élément, ce qui rend également son texte et ses descendants translucides. Voir MDN : color.

Comprendre les points de référence de px, em et rem

px est un pixel CSS. Cela n'équivaut pas toujours à un pixel physique sur l'écran et peut apparaître différemment selon le facteur d'échelle de l'écran et la densité de pixels de l'appareil. Utiliser 16px ne signifie pas que la fonction de grossissement de l'écran ne fonctionne pas.

Dans font-size, em utilise la taille de police héritée. Dans une déclaration telle que padding: 1em, elle utilise la taille de police propre de l'élément. rem utilise la taille de police de l'élément racine. Les calculs suivants supposent que les tailles de police de la racine et du parent sont de 16px. Pour plus de détails, voir Polices, tailles de caractères et hauteur de ligne.

Si vous répétez font-size: 1.25em à chaque étape où la taille parente augmente, elle augmente de 16 → 20 → 25px. Répétez 1.25rem sur la même structure, les deux étapes sont de 20px. em est pratique pour les petits composants qui doivent être proportionnels aux lettres environnantes, et rem est pratique pour partager une référence constante sur toute la page. Choisissez les critères à suivre plutôt que la réponse absolument correcte. Pour la définition de l'unité, référez-vous à la valeur CSS de MDN et au guide des unités .

Trouvez la référence pour la largeur en pourcentage

width: 50% est généralement calculé en fonction de la largeur du contenu du bloc contenant. La référence d’un pourcentage dépend de la propriété concernée. Par exemple, font-size: 125% est basé sur la taille de police héritée du parent, donc il doit être séparé du % de largeur.

.wrapper { width: 100%; max-width: 640px; padding: 1rem; }

.inner { width: 50%; font-size: 1.25rem; padding: 1em; }

Cet exemple utilise border-box, donc le padding s'adapte à la largeur déclarée. Avec une taille de police racine de 16px, suffisamment d'espace et pas de bordures, la boîte extérieure mesure 640px de large. Son padding de 16px de chaque côté laisse 608px pour la largeur du contenu. La boîte intérieure avec une largeur de 50% mesure 304px ; son padding de 20px de chaque côté laisse 264px pour le contenu. Pour plus de détails, voir Largeur, hauteur, limites min/max et box-sizing.

Si l'écran est étroit, la largeur de la boîte extérieure sera également réduite. À ce moment-là, la largeur intérieure n'est pas fixée à 304px mais est recalculée en fonction de la nouvelle largeur du contenu de la boîte extérieure. max-width dans l'exemple est un paramètre secondaire qui empêche la boîte d'être plus large que 640px.

Exécutez l'exemple complet

Entrez le code ci-dessous dans units.html enregistré en UTF-8 et ouvrez-le dans votre navigateur. Le code inclut la comparaison de couleurs, l'imbrication des unités et les calculs de largeur. Le 100% de la racine suit la taille de police par défaut du navigateur, donc la condition de 16px dans l'exercice ci-dessous est vérifiée en premier dans les outils de développement.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing colors and units</title>
  <style>
    html { font-size: 100%; }
    * { box-sizing: border-box; }
    body { margin: 16px; font-family: sans-serif; line-height: 1.7; }
    .wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }
    .inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }
    .color-name { color: teal; }
    .color-hex { color: #008080; }
    .color-rgb { color: rgb(0, 128, 128); }
    .alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }
    .nest { font-size: 16px; }
    .em-step { font-size: 1.25em; }
    .rem-step { font-size: 1.25rem; }
  </style>
</head>
<body>
  <h1>Colors and units</h1>
  <h2>Three notations of the same color</h2>
  <p class="color-name">Character specified by teal</p>
  <p class="color-hex">Characters specified as #008080</p>
  <p class="color-rgb">Character specified by rgb(0, 128, 128)</p>
  <p class="alpha">Only this box's background color has 20% opacity.</p>
  <h2>Width and spacing</h2>
  <div class="wrapper"><div class="inner">Text and padding in the inner box</div></div>
  <h2>Nested em</h2>
  <div class="nest"><div class="em-step">First step<div class="em-step">Second step</div></div></div>
  <h2>Nested rem</h2>
  <div class="nest"><div class="rem-step">First step<div class="rem-step">Second step</div></div></div>
</body>
</html>

Changez une valeur à la fois

1. Vérifiez la taille de police calculée du html dans les outils de développement. Si elle est de 16px, assurez-vous que le em imbriqué est de 20px·25px et que le rem imbriqué est de 20px·20px. Si la taille de base est différente, calculez-la avec le même multiple.
2. Changeons brièvement le html à font-size: 20px. Tous les textes basés sur rem sont de 25px, et .nest conserve les 16px spécifiés, donc le niveau em est de 20px·25px. Le padding de .inner est de 25px. Après comparaison, rétablissez la valeur initiale de 100% sur html.
3. Agrandissez la fenêtre et vérifiez les tailles des boîtes de .wrapper et .inner. Dans la condition originale de 16px, elles sont de 640px·304px. En rétrécissant la fenêtre, assurez-vous que les deux côtés rétrécissent ensemble.
4. Vérifiez les couleurs calculées des trois paragraphes de couleur. Ils doivent tous avoir la même valeur RVB. Assurez-vous que le changement de l'arrière-plan de .alpha ne floute pas le texte lui-même.

Si ce n'est pas ce à quoi vous vous attendiez, vérifiez les critères de calcul avant de simplement changer les unités. La taille de police parent et racine, le padding, le box-sizing et les règles CSS de remplacement peuvent avoir un effet. Les changements effectués dans les outils de développement disparaissent généralement lorsque vous actualisez la page, et les modifications enregistrées dans les fichiers doivent être rétablies manuellement à leurs valeurs d'origine.