Aussi disponible en : English · Español · Português · العربية
Générateur de clamp CSS
Construisez une taille de police fluide à partir d'un minimum, d'un maximum et de l'intervalle de fenêtre entre les deux — puis vérifiez ce qu'obtient un lecteur ayant agrandi son texte.
Qu'est-ce qu'un clamp en CSS ?
La fonction CSS clamp() prend trois valeurs — un minimum, une valeur préférée et un maximum — et renvoie la préférée, sauf si elle sort des deux autres. Pour la typographie, cela donne une taille de police qui croît avec la fenêtre puis s'arrête : petite sur un téléphone, plus grande sur un bureau, jamais absurde sur un écran ultralarge. Elle a remplacé une pile de media queries par une seule déclaration, et c'est pourquoi la typographie fluide s'est répandue dès que les navigateurs l'ont prise en charge.
L'intéressant, c'est la valeur du milieu. Pour être fluide, elle doit dépendre de la fenêtre : on l'écrit donc en unités vw, et ce que tout le monde emploie est une droite passant par deux ancrages — cette taille à cette largeur, cette autre taille à cette autre largeur, et l'on interpole entre les deux. Cette droite relève de l'arithmétique et non d'une règle approximative, et ce générateur la calcule exactement.
Il fait aussi ce que presque aucun générateur ne fait : vous montrer ce que votre clamp donne à quelqu'un dont la taille de police du navigateur n'est pas celle d'origine. Cela s'avère compter davantage que l'arithmétique.
Comment l'utiliser
- Fixez vos deux ancrages. La taille de police voulue à votre fenêtre la plus étroite et à la plus large. Les valeurs par défaut sont 16px à 320px et 24px à 1280px, un point de départ courant.
- Copiez la déclaration. Le terme médian sort sous la forme d'un rem plus un vw. Ce rem n'est pas décoratif : le panneau suivant porte sur ce qui se passe sans lui.
- Changez la taille de police du lecteur. Le tableau compare votre clamp aux mêmes ancrages écrits en unités de fenêtre seules, sur quatre largeurs, pour la taille par défaut que vous saisissez. Essayez 24px.
Pourquoi le terme médian a besoin d'un rem
Un clamp fluide s'écrit habituellement avec des bornes en rem et un milieu uniquement en unités de fenêtre : quelque chose comme clamp(1rem, 1.875vw, 1.5rem). Les bornes sont relatives à la taille de police du lecteur et le milieu est relatif à la fenêtre, et ce décalage est le problème. Quand quelqu'un augmente la taille de texte par défaut de son navigateur, le plancher et le plafond montent tous les deux. Ce qui les sépare ne bouge pas du tout, car rien n'y est mesuré dans les unités du lecteur.
La conséquence est pire qu'une taille simplement fausse. Prenez ce clamp et un lecteur dont la valeur par défaut est 24px. À une fenêtre de 320px, il obtient 24,00px. À 600px, 24,00px. À 900px et à 1280px, toujours 24,00px. Le terme médian ne dépasse jamais le plancher : le clamp reste donc collé à son minimum sur tout l'intervalle prévu, et la typographie a cessé d'être fluide. Écrit avec un rem dans le terme médian, ce même lecteur obtient 24,00px à l'extrémité étroite et jusqu'à 30,67px à la large.
Cet effondrement n'est pas une bizarrerie de ces chiffres. Le terme médian fait uniquement de fenêtre atteint sa plus grande valeur à l'ancrage large, et par construction cette valeur est le maximum demandé : tout lecteur dont le 1rem a atteint votre maximum est donc maintenu au plancher partout. C'est exact, et c'est pourquoi le seuil affiché par cette page est toujours égal à votre taille maximale.
Il y a là une symétrie cruelle : les lecteurs pour qui le clamp cesse silencieusement de fonctionner sont précisément ceux qui ont agrandi leur texte parce qu'ils avaient besoin qu'il réagisse. Rien ne vous alerte, puisque sur votre machine à 16px tout se comporte bien.
Comment cela a été vérifié, et ce que cela ne couvre pas
L'arithmétique est une identité, elle est donc vérifiée comme telle. Une droite passant par deux points les atteint tous les deux, et cela a été contrôlé sur 576 combinaisons générées de tailles, de fenêtres et de tailles racines plutôt que sur un seul exemple résolu — une identité vraie dans un cas et fausse ailleurs est exactement ce qu'un exemple ne peut pas vous dire. Toutes atteignent les deux ancrages, à l'arrondi près que permettent les quatre décimales d'une feuille de style.
Le tableau de comparaison est une mesure et non une illustration. Les deux formes ont été évaluées comme un navigateur évalue clamp — prendre la valeur préférée puis la borner — sur une plage de tailles de police de lecteur et de largeurs de fenêtre, avant que rien de ceci ne soit écrit. Les chiffres cités plus haut sont cette mesure.
Une correction qui mérite d'être transmise. CSS définit clamp(MIN, VAL, MAX) comme max(MIN, min(VAL, MAX)) : si vous mettez un minimum supérieur à votre maximum, le minimum l'emporte à toutes les largeurs et le navigateur ne les échangera pas obligeamment. Ce générateur reproduit ce comportement plutôt que de le corriger, car c'est la correction qui vous surprendrait plus tard.
Ce qui n'est pas couvert : ceci modélise font-size, et bien que clamp() vaille pour n'importe quelle longueur, l'argument d'accessibilité porte ici spécifiquement sur le texte. On suppose aussi que la taille de police est la seule chose que le lecteur ait modifiée — le zoom de page met la fenêtre à l'échelle également et se comporte autrement qu'une préférence de taille de police. Enfin, un terme médian contenant un rem ne suffit pas à lui seul : il rend le clamp sensible au lecteur, ce qui est nécessaire sans constituer toute la typographie accessible.
Pourquoi est-ce gratuit ?
C'est une droite passant par deux points, calculée dans votre navigateur. Il n'y a rien à faire tourner sur un serveur, donc rien à facturer et aucun compte à créer.
Rien de ce que vous saisissez n'est envoyé, conservé ni journalisé. Ce ne serait d'ailleurs pas intéressant, et c'est bien l'idée : un outil de cette taille n'a aucune raison de collecter quoi que ce soit.