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

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

sign()