Chargement...

Calc et fonctions mathématiques CSS

Les propriétés personnalisées ont donné des noms aux valeurs. Les fonctions mathématiques les calculent au rendu : soustraire une sidebar de 100%, plafonner avec min(), typo fluide avec clamp() — sans étape Sass.

`calc()` — calcul dans la valeur

Expression dans calc(...). Plus et moins exigent des espaces autour de l’opérateur :

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

Mélangez %, rem, px, vw et var() si le résultat est valide.

Espaces et unités

Invalide : calc(100%-2rem). Valide : calc(100% - 2rem). À *, un facteur doit être un nombre.

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

`min()` et `max()`

min() prend le plus petit ; max() le plus grand :

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

`clamp()` — fluide borné

Ordre : minimum, préféré, maximum.

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

Ces fonctions se résolvent au moment du calcul — elles s’accordent aux tokens sur :root et suivent la cascade comme toute autre longueur.

Quelle fonction quand ?

📊 Fonctions mathématiques

Fonction	Idée	Usage
calc()	formule pour une propriété	soustraire gouttières, doubler un token
min()	« pas plus grand que… »	plafond de largeur
max()	« au moins… »	plancher
clamp()	min + préféré + max	typo fluide

Hauteur de page simple

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

À vous

Deux colonnes avec calc sur main.
Remplacez une font-size fixe par clamp.
min(100%, 40rem) sur un wrapper.
Token :root pour formule répétée.
Espaces dans calc(100%-1rem).

Erreurs courantes

Pas d’espaces dans calc(100%-2rem)
clamp avec min > max
max() pour un plafond (min())
calc dans le nom de propriété
division de deux longueurs

Résumé

calc() — espaces autour de + / -
min() / max() — extrêmes d’une liste
clamp() — typo fluide bornée
Avec var(--tokens)
Suite : imbrication CSS

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue