J’ai passé quinze ans à contourner le même problème. Un texte, une marge, une grille : trois valeurs qui devaient grandir avec l’écran, et aucun outil pour le faire proprement. On appelait ça le responsive. En réalité, on empilait des paliers, et on avait fini par trouver ça normal.
Le temps des hacks
Rendre une taille vraiment fluide tenait du bricolage. Des media queries en cascade, un palier tous les deux cents pixels, un texte qui sautait d’une marche à l’autre. Du JavaScript qui écoutait le redimensionnement et recalculait tout à la volée, avec la fragilité que ça implique. Des astuces en rem et calc() montées à la main, justes sur une page, fausses trois écrans plus loin. J’ai pratiqué les trois, parfois dans le même projet.
Le problème n’était pas l’idée. Le fluide, on en rêvait depuis longtemps. Le problème, c’était l’outillage : le CSS ne savait pas interpoler.
Ce que le CSS a fini par apprendre
Ces dernières années ont tout changé. clamp(), min(), max() sont arrivés partout. Puis les container queries et leurs unités cqw, qui font répondre un composant à son conteneur plutôt qu’à la fenêtre. Le CSS sait enfin calculer une taille continue, sans JavaScript, sans palier. clamp(min, valeur idéale, max) borne une valeur entre un plancher et un plafond, et laisse le milieu varier tout seul. C’est la brique qui manquait.
La formule
Rendre une taille fluide, c’est tracer une droite entre deux points : une taille minimale à une largeur d’écran donnée, une taille maximale à une autre. Une équation de droite, y = ax + b :
pente = (tailleMax − tailleMin) / (largeurMax − largeurMin)
origine = tailleMin − pente × largeurMin
taille = clamp(tailleMin, origine + pente × 100vw, tailleMax)
À la largeur minimale, on obtient exactement tailleMin. À la largeur maximale, exactement tailleMax. Entre les deux, l’interpolation est continue. C’est la base de tous les générateurs fluides modernes.
Pourquoi EVA ne s’arrête pas là
Cette formule, n’importe qui peut l’écrire, et tant mieux. Le piège est ailleurs. À la main, on la recopie pour chaque taille, chaque marge, chaque niveau de titre. Vingt valeurs, vingt clamp(), vingt occasions de se tromper. Je l’ai vécu : en fin de projet, l’échelle a dérivé et plus rien ne s’accorde vraiment.
EVA CSS règle ce point d’abord : une seule source de vérité pour tout le sizing. On déclare l’intention, une échelle, un rythme, des bornes, et le framework génère les clamp(). L’harmonie tient de bout en bout, du plus petit écran au plus grand.
Il y a un second point, plus discret. La droite de clamp() est linéaire : entre les deux bornes, la taille grandit à vitesse constante. C’est mécanique. EVA introduit une courbe d’easing dans le redimensionnement. Au lieu d’une rampe droite, la transition accélère ou ralentit selon la plage d’écran, comme une animation bien réglée. Le passage du petit au grand format ne se sent plus comme un curseur qu’on pousse, mais comme un mouvement qui respire.
C’est, je crois, toute la différence entre du fluide artisanal et un système fluide. L’un juxtapose des calculs. L’autre pose une intention et la tient partout.
Fluide, pas adaptatif
Le vieux rêve n’était pas d’avoir trois versions d’un site. C’était d’en avoir une seule, qui s’adapte sans jamais casser. Le CSS le permet enfin. EVA en fait une méthode, et quinze ans de contournements trouvent doucement leur conclusion.
