Valeurs absolues en CSS avec abs()

Vous avez une propriété personnalisée CSS qui peut être positive ou négative selon le contexte, et vous devez l’utiliser dans un endroit qui n’accepte que des valeurs positives — comme padding ou animation-delay. Avant abs(), vous deviez soit recourir à JavaScript, soit écrire une solution de contournement verbeuse avec max(). Désormais, vous pouvez gérer cela directement en CSS.

Qu’est-ce que la fonction CSS abs() ?

abs() est une fonction mathématique CSS issue de la spécification CSS Values and Units Module Level 4. Elle prend une seule expression numérique et retourne sa valeur absolue — toujours non négative, avec la même unité que l’entrée.

width: abs(-200px);         /* → 200px */
padding: abs(20px - 30px);  /* → 10px */
font-size: abs(-1.5rem);    /* → 1.5rem */

Elle fonctionne avec les nombres, longueurs, pourcentages, angles et toute expression que vous écririez à l’intérieur de calc(). Les unités sont préservées exactement.

Syntaxe et types de valeurs supportés

abs( <calc-sum> )

L’argument peut être n’importe quoi qui se résout en une valeur numérique :

abs(-4)                /* nombre simple → 4 */
abs(-8vh)              /* longueur → 8vh */
abs(-60%)              /* pourcentage → 60% */
abs(20% - 60%)         /* expression → 40% */
abs(min(-20px, 10px))  /* fonction imbriquée → 20px */

Une précision importante : abs() opère sur l’expression mathématique que vous fournissez, mais les valeurs comme les pourcentages sont toujours résolues plus tard selon les règles normales de la propriété. Par exemple, abs(25%) dans background-position est toujours résolu via la formule de dimensionnement de cette propriété par la suite.

Cas d’usage pratiques

Prévenir les valeurs négatives invalides issues de propriétés personnalisées

Les propriétés personnalisées peuvent contenir des valeurs signées qui cassent certaines propriétés CSS lorsqu’elles sont négatives.

:root {
  --offset: -30px; /* peut être positive ou négative */
}

/* ❌ Avant : padding-top: -30px est invalide */
.card { padding-top: var(--offset); }

/* ✅ Après : se résout toujours à 30px */
.card { padding-top: abs(var(--offset)); }

Ce pattern est particulièrement utile dans les design systems où les tokens peuvent être définis programmatiquement.

Stabiliser animation-delay dans les animations symétriques

Lors du calcul de la distance depuis un index central, la soustraction peut devenir négative pour les éléments avant le centre. Un animation-delay négatif ne diffère pas le démarrage — il fait commencer l’animation au milieu de son cycle, ce qui casse le timing en vague symétrique :

.bar {
  --distance: abs(var(--my-idx) - var(--center-idx));
  animation-delay: calc(var(--distance) * 0.1s);
}

Sans abs(), les barres à gauche du centre obtiendraient un délai négatif et sauteraient en avant dans l’animation au lieu d’attendre leur tour.

Calculs d’espacement responsive

.section {
  gap: abs(10vw - 4rem); /* toujours un gap positif, quelle que soit la viewport */
}

abs() vs. autres fonctions mathématiques CSS

La solution de contournement avec max() pour les valeurs absolues — max(var(--x), calc(-1 * var(--x))) — fonctionne mais est verbeuse. Utilisez-la uniquement pour cibler les navigateurs plus anciens qui ne supportent pas abs().

Support navigateur et solutions de repli

abs() est supportée dans les navigateurs modernes, incluant les versions récentes de Chrome, Edge, Firefox et Safari. Le support est solide dans les versions actuelles des navigateurs, mais les versions plus anciennes peuvent en manquer. Consultez Can I Use — abs() pour les données de compatibilité actuelles.

Pour l’amélioration progressive :

@supports not (width: abs(-10px)) {
  .element {
    padding: max(var(--val), calc(-1 * var(--val)));
  }
}

Pièges courants

abs() ne fonctionne pas avec les mots-clés CSS :

width: abs(auto);     /* ❌ invalide — auto n'est pas une expression numérique */

Envelopper calc() dans abs() est redondant :

width: abs(calc(50% - 100px)); /* ⚠️ fonctionne mais inutile */
width: abs(50% - 100px);       /* ✅ plus propre */

abs() n’est pas la même chose que le abs() intégré de Sass — Sass le résout au moment de la compilation avec des nombres sans unité, tandis que le abs() CSS s’exécute dans le navigateur pendant le layout et gère correctement les dimensions. Si vous utilisez les deux, sachez que Sass peut intercepter l’appel. Pour le transmettre au CSS, vous pouvez écrire abs(#{...}) ou utiliser explicitement la forme namespacée math.abs() pour la version Sass.

Conclusion

abs() comble un vrai manque dans les mathématiques CSS : elle vous permet de travailler avec des valeurs signées en toute sécurité, sans JavaScript ni solutions de contournement alambiquées. Si vous construisez des composants qui utilisent des propriétés personnalisées pour l’espacement, le timing ou les calculs de layout, cela vaut la peine de l’ajouter à votre boîte à outils maintenant que le support navigateur est solide sur les moteurs modernes.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.