<dashed-function> : fonctions personnalisées CSS

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

Le type de données CSS <dashed-function> représente la syntaxe utilisée pour appeler les fonctions personnalisées CSS, qui sont définies à l'aide de la règle @function.

Syntaxe

Une valeur <dashed-function> consiste en un --nom-de-fonction, suivi de parenthèses contenant les arguments de la fonction (par exemple : --ma-fonction(30px, 3)).

Vous pouvez inclure des valeurs <dashed-function> à la place de valeurs de propriétés CSS classiques ou de composants de valeurs de propriété, dans les cas où vous souhaitez calculer dynamiquement les valeurs selon une logique de fonction plutôt que de fournir des valeurs statiques.

Si vous souhaitez passer des valeurs contenant des virgules comme arguments, vous pouvez le faire en les entourant d'accolades ({ }).

Exemples

Pour plus d'exemples, consultez le guide Utiliser les fonctions personnalisées CSS.

Utilisation basique de `<dashed-function>`

Cet exemple montre une fonction basique qui retourne une version semi-transparente de la couleur passée en argument.

HTML

Le balisage comporte un <p> contenant du texte :

html

<p>Du contenu</p>

CSS

Dans nos styles, nous définissons d'abord la fonction personnalisée CSS. La fonction s'appelle --transparent et accepte deux paramètres : une couleur et une valeur alpha numérique. Dans le corps de la fonction, nous utilisons la syntaxe de couleur relative pour transformer la couleur passée en une couleur oklch() avec un canal alpha égal à la valeur alpha passée ; cela devient le resultat de la fonction :

css

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

Ensuite, nous définissons une propriété personnalisée --base-color avec la valeur #faa6ff sur l'élément :root. Nous assignons cette propriété à la couleur de la border de l'élément <p>, puis nous définissons la background-color sur une version transparente de la même couleur. Cela se fait en utilisant la syntaxe <dashed-function>, en spécifiant la fonction --transparent() et en lui passant les arguments var(--base-color) et 0.8.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

css

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}