abs()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La fonction CSS abs() contient un calcul et renvoie la valeur absolue de l'argument, avec le même type que l'argument.

L'instruction abs(A) renverra A si la valeur numérique A est supérieure ou égale à 0. Sinon, elle renverra la valeur de -1 * A.

Syntaxe

css
/* propriété: abs(expression) */
width: abs(20% - 100px);

La fonction abs() prend une seule expression comme argument.

Syntaxe formelle

<abs()> = 
abs( <calc-sum> )

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Exemples

Variables positives

La fonction abs() peut être utilisée afin de s'assurer qu'une valeur est toujours positive. Dans l'exemple suivant, on a une propriété personnalisée, --font-size, qui est utilisée comme valeur pour font-size. Envelopper cette propriété dans un appel à la fonction abs() convertira une valeur négative en une valeur positive.

css
h1 {
  font-size: abs(var(--font-size));
}

Contrôler la direction d'un dégradé

Il est aussi possible d'utiliser la fonction abs() pour contrôler la direction d'un dégradé. Dans l'exemple qui suit, en utilisant un angle de -45deg, le dégradé commencerait en rouge avant de passer au bleu. En utilisant abs() afin de rendre la valeur positive, le dégradé commencera en bleu et passera ensuite au rouge.

css
div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}

Spécifications

Specification
CSS Values and Units Module Level 4
# sign-funcs

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
abs()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Voir aussi