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

BCD tables only load in the browser

Voir aussi