CSS clamp() expliqué avec des chiffres réels

La fonction CSS clamp() prend trois valeurs — clamp(MIN, PREFERRED, MAX) — et renvoie la valeur préférée verrouillée entre les deux bornes ; formellement, elle se résout en max(MIN, min(PREFERRED, MAX)). Pour la typographie, la valeur préférée est généralement une formule qui croît avec la fenêtre d’affichage, ce qui fait d’une taille de police clamp la forme standard, en une ligne, de la typographie fluide : une taille qui glisse avec la largeur de l’écran mais ne peut jamais quitter la plage prévue.

La plupart des explications s’arrêtent à l’anatomie. Celle-ci calcule un exemple réel de bout en bout — pente, ordonnée à l’origine, la déclaration finale — et le vérifie à trois largeurs de fenêtre, car c’est dans l’arithmétique que clamp() cesse d’être magique. Cet article fait partie de notre guide de la typographie fluide.

Comment clamp() décide-t-elle quelle valeur l’emporte ?

Voyez les trois arguments comme un plancher, une valeur mobile et un plafond — une anatomie que le guide de web.dev sur min(), max() et clamp() illustre bien. Le navigateur évalue d’abord la valeur préférée :

• Valeur préférée sous le minimum → le minimum l’emporte (le plancher tient).
• Valeur préférée entre les bornes → la valeur préférée l’emporte (la partie mobile commande).
• Valeur préférée au-dessus du maximum → le maximum l’emporte (le plafond tient).

La fonction css clamp se réévalue dès que ses entrées changent — ainsi une valeur préférée contenant vw est recalculée à chaque redimensionnement, ce qui est précisément la propriété qu’exploite la typographie fluide.

Que signifient les parties rem et vw de la valeur préférée ?

Une valeur préférée fluide comme 0.9511rem + 0.2174vw est une équation de droite déguisée : size = intercept + slope × viewport. Le terme vw est la pente — combien de pixels la taille gagne par unité de largeur de fenêtre — et le terme rem est l’ordonnée à l’origine, la valeur qu’aurait la droite pour une fenêtre de largeur nulle, hypothétique. Deux nombres, et ensemble ils déterminent entièrement le glissement.

L’ordonnée à l’origine en rem n’est pas cosmétique : rem suit le réglage de taille de police de l’utilisateur et le zoom du navigateur, si bien que toute la droite se décale quand le lecteur zoome. Une valeur préférée faite de vw pur est à la fois rigide (un seul terme doit encoder à la fois la position et la pente) et un échec d’accessibilité, puisqu’un texte défini uniquement en unités de fenêtre ignore totalement le zoom.

Comment calculer les nombres à l’intérieur de clamp() ?

Prenez l’un des briefs les plus courants en typographie fluide : du texte courant à 16px sur une fenêtre de 360px, croissant jusqu’à 18px à 1280px. Trois étapes.

Étape 1 — la pente. La croissance divisée par l’amplitude de la fenêtre :

slope = (18 − 16) / (1280 − 360) = 2 / 920 ≈ 0.002174

Multipliez par 100 pour l’exprimer en vw (1vw = 1 % de la largeur de la fenêtre) : ≈0,2174vw.

Étape 2 — l’ordonnée à l’origine. Remontez la droite depuis le premier point connu :

intercept = 16 − 0.002174 × 360 ≈ 15.22px ≈ 0.9511rem   (÷16)

Étape 3 — l’assemblage. Minimum et maximum en rem (16px = 1rem, 18px = 1,125rem), la valeur préférée à partir des deux termes calculés :

font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);

Vérifiez-le maintenant, car un clamp que vous ne pouvez pas contrôler est un clamp auquel vous ne pouvez pas vous fier :

Les extrémités tombent sur les tailles prévues, et le point médian se place là où la droite l’indique. Vous pouvez inspecter les mêmes nombres en direct : ouvrez ce clamp dans Scale Composer — les paramètres fluides (16→18 sur 360→1280) produisent exactement cette expression, et faire glisser la largeur d’aperçu parcourt le tableau ci-dessus en temps réel.

clamp() fonctionne-t-elle sur autre chose que font-size ?

Oui — clamp() accepte toute propriété à valeur de longueur. Un padding qui respire avec la fenêtre, un gap qui se resserre sur les petits écrans, une colonne de contenu qui croît jusqu’à un plafond : ce sont toutes le même motif avec des unités différentes dans les mêmes trois emplacements. Les systèmes d’espacement fluide reposent exactement là-dessus, avec la même arithmétique de pente que la typographie fluide.

Quels sont les pièges courants de clamp() ?

Trois modes d’échec couvrent les surprises courantes de clamp() :

1. Un minimum plus grand que le maximum. clamp() ne réordonne pas ses arguments — par définition, max(MIN, min(PREFERRED, MAX)) — donc quand MIN dépasse MAX, MIN l’emporte tout simplement et la valeur se fige. Facile à provoquer quand un calcul produit une pente négative.
2. Des pourcentages dans font-size. Un % à l’intérieur d’un clamp de font-size se résout par rapport à la taille de police du parent, pas à la fenêtre ni à la racine — les éléments imbriqués la composent. Utilisez rem pour l’ordonnée à l’origine et les bornes.
3. Oublier le terme de zoom. La partie rem de la valeur préférée est ce qui permet au zoom du navigateur et aux préférences de taille de police de l’utilisateur de déplacer toute la plage. Un clamp dont la valeur préférée est du vw pur conserve sa taille en pixels alors que l’utilisateur demande un texte plus grand.

Déplacer le clamp vers la racine

Un clamp par taille fonctionne ; un seul clamp pour tout le système passe mieux à l’échelle. Placez l’expression sur html { font-size: … } et écrivez toutes les autres tailles en rem : chaque valeur en rem suit désormais le glissement de la racine, si bien que toute l’échelle devient fluide avec une seule pente — l’architecture que le mode fluide de Scale Composer génère pour vous. Ouvrez la configuration du clamp racine pour voir l’expression unique sur la racine et toute l’échelle glisser en dessous — puis changez base-max de 18 à 20 et regardez une seule modification réaccorder chaque taille de la page.