OUJOOD.COM
Les fonctions mathématiques en CSS
Avant l'arrivée de calc(), créer une mise en page qui s'adapte à toutes les tailles d'écran nécessitait des contournements : valeurs fixes, media queries à répétition, ou JavaScript pour calculer des dimensions à la volée. Ces fonctions mathématiques CSS changent la donne. Elles permettent de mélanger des unités différentes — pourcentages, pixels, viewport units — directement dans la feuille de style, sans une ligne de script.
Dans ce tutoriel, on couvre les trois fonctions les plus utiles au quotidien : calc(), min() et max(). On verra aussi clamp(), qui combine les deux dernières en une seule règle.
La fonction calc()
calc() évalue une expression mathématique et retourne le résultat comme valeur CSS. Son intérêt principal : elle accepte des unités différentes dans la même opération. On peut soustraire des pixels à un pourcentage, ou additionner des rem à des vw — ce qu'aucune valeur CSS classique ne permet.
Syntaxe :
width: calc(expression);
Par exemple, pour qu'un bloc occupe toute la largeur disponible mais laisse 20px de marge de chaque côté :
width: calc(100% - 40px);
Un détail important : les opérateurs + et - doivent être entourés d'espaces, sinon le navigateur interprète mal l'expression. calc(100% -40px) ne fonctionnera pas ; calc(100% - 40px) oui.
Les fonctions min() et max()
min() et max() comparent plusieurs valeurs et retournent respectivement la plus petite ou la plus grande. Elles sont particulièrement utiles pour définir des limites flexibles — un élément qui grandit avec l'écran, mais jamais au-delà d'une taille raisonnable.
Syntaxe :
property: max(value1, value2);
property: min(value1, value2);
Exemple concret avec min() pour la taille de police : on veut qu'elle s'adapte à l'écran, sans jamais dépasser 24px sur grand écran :
font-size: min(3vw, 24px);
Sur un écran de 600px de large, 3vw donne 18px — c'est la valeur retenue. Sur un écran de 1000px, 3vw donne 30px, ce qui dépasse 24px, donc c'est 24px qui s'applique. Résultat : une typographie fluide avec un plafond.
La fonction clamp() — le bonus
clamp() est apparue un peu après les deux précédentes, mais elle est devenue incontournable en 2024-2026 pour les typographies et les espacements fluides. Elle prend trois valeurs : un minimum, une valeur idéale, et un maximum.
font-size: clamp(14px, 2.5vw, 22px);
Ici, la police ne descendra jamais sous 14px (lisibilité garantie sur mobile), visera 2.5% de la largeur d'écran, et ne montera pas au-delà de 22px. C'est l'équivalent d'écrire max(14px, min(2.5vw, 22px)) — mais en beaucoup plus lisible.
Exemples pratiques
Les trois exemples ci-dessous illustrent chaque fonction avec un cas d'usage réel. Le code est complet et testable directement dans le navigateur.
Exemple 1 — calc() : un div qui s'étend sur toute la fenêtre avec 50px d'espace de chaque côté.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>calc() — largeur dynamique</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px); /* 100px = 50px à gauche + 50px à droite */
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h1>La fonction calc()</h1>
<p>Ce div s'étend sur toute la fenêtre avec 50px d'espace de chaque côté.</p>
<div id="div1">Contenu du bloc</div>
</body>
</html>
Exemple 2 — max() : la largeur du div vaut 50% de la fenêtre, mais jamais moins de 300px. Sur petit écran, le bloc garde une taille minimale utilisable.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>max() — largeur minimale garantie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div1 {
background-color: yellow;
height: auto;
width: max(50%, 300px); /* prend la plus grande des deux valeurs */
}
</style>
</head>
<body>
<h1>La fonction max()</h1>
<p>Redimensionnez la fenêtre pour voir le comportement.</p>
<div id="div1">Contenu du bloc</div>
</body>
</html>
Exemple 3 — min() : la largeur du div vaut 50% de la fenêtre, mais jamais plus de 300px. Sur grand écran, le bloc reste compact.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>min() — largeur maximale limitée</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div1 {
background-color: yellow;
height: auto;
width: min(50%, 300px); /* prend la plus petite des deux valeurs */
}
</style>
</head>
<body>
<h1>La fonction min()</h1>
<p>Redimensionnez la fenêtre pour voir le comportement.</p>
<div id="div1">Contenu du bloc</div>
</body>
</html>
Autres fonctions CSS utiles
Ces fonctions mathématiques ne sont qu'une partie de l'outillage CSS. Voici d'autres fonctions courantes, chacune avec son rôle précis :
- rgb() : définit une couleur via ses composantes rouge, vert et bleu. Exemple :
color: rgb(255, 0, 0);
donne du rouge pur. - rgba() : identique à rgb(), avec un quatrième paramètre pour l'opacité (0 = transparent, 1 = opaque). Exemple :
background-color: rgba(255, 255, 255, 0.5);
donne un fond blanc à 50% de transparence. - hsl() : définit une couleur par teinte (0–360°), saturation et luminosité. Plus intuitif que rgb() pour ajuster des variations d'une même couleur. Exemple :
color: hsl(120, 100%, 50%);
donne un vert vif. - url() : référence une image ou une ressource externe. Exemple :
background-image: url("image.jpg"); - linear-gradient() : crée un dégradé entre plusieurs couleurs. Exemple :
background-image: linear-gradient(to right, red, orange, yellow); - box-shadow() : ajoute une ombre à un élément — position, flou, couleur. Exemple :
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); - transform() : applique une transformation géométrique — rotation, translation, mise à l'échelle. Exemple :
transform: rotate(45deg); - transition() : anime le passage d'une valeur CSS à une autre. Exemple :
transition: background-color 0.3s ease-in-out; - @media() : applique des styles selon la taille de l'écran ou le type d'appareil. Exemple :
@media (min-width: 768px) { ... }
Par carabde | Mis à jour le 12 avril 2026