abs()

Limited availability

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

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

Voir aussi

sign()