Calculateur de clamp() CSS

Indiquez la taille voulue sur petit écran, celle voulue sur grand écran, et les deux largeurs de viewport entre les deux. L’outil calcule la valeur clamp() qui trace une droite entre ces deux points et affiche la taille obtenue à sept largeurs courantes. La phrase d’exemple de l’aperçu est vraiment mise en forme avec la valeur générée : elle change quand vous redimensionnez la fenêtre.

Mes données sont-elles envoyées quelque part ?

Non. Tout se résume ici à du calcul fait dans votre navigateur. Les nombres saisis ne partent jamais vers un serveur, et il n’y a ni compte, ni journal, ni requête réseau derrière le résultat.

Comment le calcul fonctionne-t-il ?

clamp() prend trois valeurs : un minimum, une valeur préférée et un maximum. Le navigateur utilise la valeur préférée, sans jamais la laisser descendre sous le minimum ni dépasser le maximum.

La valeur préférée est la partie intéressante. Elle doit grandir avec le viewport, et c’est le rôle des unités vw : 1vw vaut un pour cent de la largeur du viewport. Pour passer de 16px à 320px de viewport à 48px à 1280px, la taille doit gagner 32px sur 960px de largeur, soit 0,0333px par pixel, c’est-à-dire 3.3333vw. La pente seule tomberait sur de mauvaises tailles, alors un décalage fixe replace la droite au bon endroit. On obtient clamp(1rem, 0.3333rem + 3.3333vw, 3rem), et ce décalage explique pourquoi le terme du milieu comporte deux parties.

Les nombres sont arrondis à quatre décimales et les zéros de fin sont supprimés : vous obtenez 1.5rem plutôt que 1.5000rem. Les tailles se saisissent en pixels ; passer l’unité de sortie à rem les divise par la taille de police racine, qui vaut 16px dans les réglages par défaut de tous les navigateurs.

Et si les nombres n’ont pas de sens ?

L’outil vous prévient au lieu de produire discrètement une valeur fausse. Si les deux largeurs de viewport sont identiques, il n’y a pas de plage à parcourir : la taille reste constante et le terme en vw disparaît. Si les tailles minimale et maximale sont égales, l’avertissement apparaît pour la même raison.

Le cas à surveiller est un minimum supérieur au maximum. CSS résout clamp() comme max(MIN, min(VALUE, MAX)) : le minimum l’emporte et la taille y reste bloquée pour de bon. Les navigateurs le font sans rien dire. Le tableau d’aperçu montre la valeur bloquée et un avertissement l’explique.

Quand s’en sert-on ?

Des titres qui doivent être grands sur un ordinateur et lisibles sur un téléphone, un padding de section qui ne peut pas rester à 8rem sur un écran de 375px, l’espacement d’une grille de cartes, ou un texte d’accroche qui doit remplir sa place à toutes les largeurs.