| Variable | Min (px) | Courbe | Max (px) | à 768 px | Actions |
|---|
| Variable | Min (px) | Courbe | Max (px) | à 768 px | Actions |
|---|
Accessibilité : au-delà de ×2,5 entre min et
max, un texte en vw risque de ne pas doubler au
zoom 200 % (WCAG 1.4.4). Réduisez l'écart entre les deux
valeurs.
Aperçu à 768 px
Bougez la règle : l'échelle s'étire.
Non supporté par ce navigateur :
n'est pas reconnu ici, les
variables générées n'auraient aucun effet. L'aperçu n'est donc
pas simulé.
Les détails techniques de chaque solution
clamp()
clamp(min, préférée, max) borne une valeur
préférée calculée en rem + vw. Elastic calcule
cette droite pour qu'elle passe par la taille min à l'écran
min et par la taille max à l'écran max.
--text-m: clamp(var(--text-16), 0.951rem + 0.2174vw, var(--text-18));Support
Chrome et Edge 79, Firefox 75, Safari 13.1 (iOS 13.4). Disponible partout depuis 2020.
Accessibilité
Au zoom texte seul, la partie en rem double mais
pas la partie en vw : le texte ne fait ×2 qu'en
bas de plage (×1,3 à 1280 px pour un passage de 30 à 60 px).
Au zoom de page, gardez un écart min/max inférieur à ×2,5.
En bref
Le choix sûr pour la production. Son défaut : des « nombres magiques » illisibles et difficiles à modifier à la main.
progress()
progress(valeur, début, fin) renvoie un nombre de
0 à 1. Elastic calcule une seule fois la progression du
viewport dans --fluid, puis chaque token
interpole entre ses deux primitives.
--fluid: progress(100vw, 360px, 1280px);
--text-m: calc(var(--text-16) + (var(--text-18) - var(--text-16)) * var(--fluid));Support
Chrome et Edge 138, Safari 26, Firefox 155. Baseline depuis
septembre 2026 : prévoyez clamp() si vous visez
des navigateurs plus anciens.
Accessibilité
Les bornes d'écran sont en px et les tailles en
rem : au zoom texte 200 %, le texte double
exactement, à toutes les largeurs. Au zoom de page, même
limite que clamp() : surveillez l'écart min/max.
En bref
Aucun nombre magique : tout ce qui est écrit se relit (360, 1280, 16, 18). Toutes les variables partagent la même plage d'écran.
@function
Une fonction CSS native --fluid() encapsule le
calcul : chaque token l'appelle avec ses deux primitives.
--text-m: --fluid(var(--text-16), var(--text-18));Support
Chrome et Edge 139 uniquement. Pas encore dans Firefox, en Technology Preview dans Safari : à réserver aux expérimentations.
Accessibilité
Comme progress() : bornes d'écran en
px, le texte double exactement au zoom texte 200
%. Au zoom de page, surveillez l'écart min/max.
En bref
La syntaxe la plus lisible, et la plus réutilisable : la fonction peut servir ailleurs que dans les tokens. Mais elle n'a aucun effet dans les navigateurs qui ne la comprennent pas.