Type CSS <dashed-function>

Syntaxe

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

Vous pouvez inclure des valeurs <dashed-function> la place de valeurs de proprits CSS classiques ou de composants de valeurs de proprit, dans les cas o vous souhaitez calculer dynamiquement les valeurs selon une logique de fonction plutt 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 personnalises CSS.

Utilisation basique de <dashed-function>

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

HTML

Le balisage comporte un <p> contenant du texte :

<p>Du contenu</p>

CSS

Dans nos styles, nous dfinissons d'abord la fonction personnalise CSS. La fonction s'appelle --transparent et accepte deux paramtres : une couleur et une valeur alpha numrique. Dans le corps de la fonction, nous utilisons la syntaxe de couleur relative pour transformer la couleur passe en une couleur oklch() avec un canal alpha gal la valeur alpha passe ; cela devient le resultat de la fonction :

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

Ensuite, nous dfinissons une proprit personnalise --base-color avec la valeur #faa6ff sur l'lment :root. Nous assignons cette proprit la couleur de la border de l'lment <p>, puis nous dfinissons la background-color sur une version transparente de la mme couleur. Cela se fait en utilisant la syntaxe <dashed-function>, en spcifiant 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
  );
}

: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);
}

Rsultat

Spcifications

Compatibilit des navigateurs

Voir aussi

• Proprits personnalises CSS
• La rgle @function
• La fonction type()
• Utiliser les fonctions personnalises CSS
• Le module des Fonctions et mixins personnaliss CSS