Fonction CSS sign()

Syntaxe

/* property: sign( expression ) */
top: sign(20vh - 100px);

Paramètres

La fonction sign(x) n'accepte qu'une seule valeur comme paramètre.

x

Un calcul qui se résout en un nombre.

Valeur de retour

Un nombre représentant le signe de x :

• Si x est positif, retourne 1.
• Si x est négatif, retourne -1.
• Si x est zéro positif, retourne 0.
• Si x est zéro négatif, retourne -0.
• Sinon, retourne NaN.

Syntaxe formelle

<sign()> = 
  sign( <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

Positionner l'image de fond

Par exemple, dans background-position, les pourcentages positifs se résolvent en une longueur négative, et vice versa, si l'image de fond est plus grande que la zone de fond. Ainsi, sign(10%) peut retourner 1 ou -1, selon la manière dont le pourcentage est résolu ! (Ou même 0, s'il est résolu par rapport à une longueur nulle.)

div {
  background-position: sign(10%);
}

Direction de la position

Un autre cas d'utilisation est de contrôler la position de l'élément. Soit une valeur positive, soit une valeur négative.

div {
  position: absolute;
  top: calc(100px * sign(var(--value)));
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• La fonction abs()
• Utiliser l'arithmétique typée CSS