Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Unités : comprendre rem, em, %, ch et vw | SovranCode

Contenu du coursValues, Units, and Color · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS49 min

Values, Units, and Color

Choose flexible units, useful custom properties, and accessible color values.

Les valeurs CSS peuvent être fixes, relatives, calculées ou issues de propriétés personnalisées. rem suit la taille de police de l’élément racine ; les pourcentages dépendent de la propriété utilisée. Avec clamp(), vous pouvez faire varier une valeur tout en lui imposant des limites.

Comprendre les références utilisées

Dans cet exemple, repérez d’abord les références : rem pour l’espacement minimal et maximal, vw pour la largeur de la fenêtre, ch pour la longueur de ligne et % pour la largeur disponible. Regardez ensuite comment les fonctions combinent ces valeurs.

:root {
  --space: clamp(1rem, 2vw, 2rem);
  --text: #10231f;
  --surface: oklch(97% 0.02 95);
}

.prose {
  width: min(70ch, 100%);
  padding: var(--space);
}

Les bons réflexes

Utilisez rem pour le texte et les espacements qui doivent suivre les préférences de taille de police.
Utilisez ch pour limiter la longueur des lignes, en vérifiant le résultat avec la police choisie.
Mesurez le contraste entre le texte et son fond avec un outil adapté.

L’erreur à éviter

Une taille de texte exprimée uniquement en unités de fenêtre peut devenir trop petite sur mobile ou trop grande sur un écran large. Utilisez min(), max() ou clamp() pour fixer des limites, et vérifiez aussi le résultat lorsque le texte est agrandi.

ATELIER CSS · ENVIRON 25 MIN

Créer des espacements fluides et des couleurs réutilisables

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Choisir la référence avant la valeur

rem se rapporte à la taille de police de l’élément racine. Pour font-size, em se rapporte à la taille de police du parent ; pour les autres longueurs, il se rapporte généralement à celle de l’élément lui-même. La référence d’un pourcentage dépend de la propriété : une largeur en % utilise couramment la largeur du bloc conteneur, et non celle de la fenêtre. Pour comprendre une valeur, il faut donc connaître sa propriété et son contexte. Respectez les préférences de police du navigateur et essayez une taille de texte agrandie, au lieu de fixer la taille racine uniquement pour simplifier les calculs.

Encadrer les valeurs fluides et prévoir une valeur de repli

clamp() conserve une valeur préférée entre un minimum et un maximum. Un espacement peut ainsi suivre la largeur de la fenêtre tout en restant utilisable aux deux extrêmes. Les propriétés personnalisées stockent des valeurs réutilisables et se transmettent par héritage. Dans var(--name, fallback), la valeur de repli sert lorsque la propriété personnalisée est absente ou invalide en tant que telle ; elle ne vérifie pas que n’importe quelle valeur fournie convient à la propriété qui la reçoit. Pour les couleurs, nommez les rôles, comme le texte et le fond. Mesurez le contraste de chaque paire réellement utilisée, y compris dans les états interactifs : une couleur agréable à l’œil n’assure pas la lisibilité.

Redimensionnez l’aperçu et examinez le padding du panneau. À la largeur la plus étroite, comparez clamp(1rem, 4vw, 3rem) avec la valeur 4vw utilisée seule.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
:root { --space: clamp(1rem, 4vw, 3rem); --ink: #172b40; --surface: #edf2f7; }
body { font: 1rem/1.7 system-ui; margin: 0; padding: 1rem; }
.panel { box-sizing: border-box; width: min(100%, 65ch); margin-inline: auto; padding: var(--space); color: var(--ink); background: var(--surface); }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.2; }
</style>
</head>
<body>
<main class="panel"><h1>De l’espace pour lire</h1><p>Ce panneau doit rester lisible sur un écran étroit comme sur un écran large. Modifiez les propriétés personnalisées pour voir comment une même valeur agit sur plusieurs éléments.</p></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
:root { --space: clamp(1rem, 4vw, 3rem); --ink: #172b40; --surface: #edf2f7; }
body { font: 1rem/1.7 system-ui; margin: 0; padding: 1rem; }
.panel { box-sizing: border-box; width: min(100%, 65ch); margin-inline: auto; padding: var(--space); color: var(--ink); background: var(--surface); }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.2; }
</style>
</head>
<body>
<main class="panel"><h1>De l’espace pour lire</h1><p>Ce panneau doit rester lisible sur un écran étroit comme sur un écran large. Modifiez les propriétés personnalisées pour voir comment une même valeur agit sur plusieurs éléments.</p></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.panel { padding: var(--spcae); }

Voir la correction et son explication

.panel { padding: var(--space, 1rem); }

Le nom de la propriété personnalisée contient une faute : --spcae n’existe pas. Corrigez-le et ajoutez une valeur de repli adaptée, puis vérifiez le padding calculé dans les outils de développement.

À VOUS DE JOUER

Créer sans recopier l’exemple

Définissez des propriétés personnalisées pour le fond, le texte et l’espacement de deux panneaux. Sur l’un des panneaux, redéfinissez uniquement la couleur de fond.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer des espacements fluides et des couleurs réutilisables — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer des espacements fluides et des couleurs réutilisables</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer des espacements fluides et des couleurs réutilisables — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer des espacements fluides et des couleurs réutilisables</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

L’espacement possède un minimum et un maximum explicites.Le texte reste lisible lorsque la taille de police par défaut du navigateur augmente.Le contraste entre chaque couleur de texte et son fond a été vérifié avec un outil.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. À quoi correspond 1rem ?La largeur de la fenêtre du navigateurLa taille de police de l’élément racineLa piste de grille la plus proche

2. Quelle expression fait varier un espacement entre 1rem et 3rem ?clamp(1rem, 4vw, 3rem)min(1rem, 3rem)4vw

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

Values, Units, and Color

Comprendre les références utilisées

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Créer des espacements fluides et des couleurs réutilisables

Choisir la référence avant la valeur

Encadrer les valeurs fluides et prévoir une valeur de repli

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris