Nouveautés

Avec l'arrivée de la version 139 du navigateur Chrome, le langage CSS offre aux développeurs front-end la possibilité de créer des fonctions personnalisées. Pour cela, il faut utiliser une règle nommée @function.

Premier exemple

@function --negate(--value) {
  result: calc(var(--value) * -1);
}

div {
  --gap: 1em;
  margin-top: --negate(var(--gap));
}

Dans l'exemple ci-dessous, on a une fonction --negate qui permet de convertir une valeur positive en une valeur négative. Elle prend en paramètre la variable --value. Pour renvoyer une valeur calculée, on utilise une propriété CSS qui s'appelle result.

Enfin, il suffit d'appeler cette fonction --negate et passer la valeur en question.

Deuxième exemple

@function --multiply(--a, --b) {
  result: calc(var(--a) * var(--b));
}

.box {
  --spacing: 10px;
  margin-top: --multiply(var(--spacing), 3);
}

Autre exemple : une fonction --multiply qui (comme son nom l'indique), va multiplier une valeur par une autre. Elle prend deux paramètres : --a et --b. Ainsi, la valeur calculée va être mise dans la propriété result afin de la renvoyer.

À la fin, on peut l'utiliser pour multiplier l'espacement de la marge supérieure par 3 par exemple.

La particularité de ces fonctions personnalisées, c'est que le nom des fonctions doit toujours commencer par deux tirets (--), cela vaut de même pour le nom des paramètres.

Pour le moment, cette fonctionnalité est expérimentale. Elle n'est pas entièrement compatible sur tous les navigateurs. Il faudra encore attendre pour que les fonctions personnalisées en CSS soient complètement prêtes.

Source(s)

Ce blog est inspiré de quelques sources afin de comprendre l'intêret d'utiliser cette fonctionnalité :

• https://developer.chrome.com/blog/new-in-chrome-139?hl=fr
• https://drafts.csswg.org/css-mixins-1/#defining-custom-functions (ce document vous donne des exemples approfondis).