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.

Le temps des hacks

Rendre une taille vraiment fluide tenait du bricolage. Soit des media queries en cascade, un palier tous les deux cents pixels, et un texte qui sautait d’une marche à l’autre. Soit du JavaScript qui écoutait le redimensionnement et recalculait tout à la volée, avec le coût et la fragilité que ça implique. Soit des astuces en rem et calc() montées à la main, justes sur une page, fausses trois écrans plus loin.

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 a enfin de quoi 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, tout le monde peut l’écrire. 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. En fin de projet, l’échelle a dérivé et plus rien n’est cohérent.

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), 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 subtil. 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 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, avec du caractère.

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.