<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'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.

Letype de données CSS<dashed-function> représente la syntaxe utilisée pour appeler lesfonctions 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 souhaitezpasser des valeurs contenant des virgules comme arguments, vous pouvez le faire en les entourant d'accolades ({ }).

Exemples

Pour plus d'exemples, consultez le guideUtiliser 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 lasyntaxe de couleur relative pour transformer la couleur passée en une couleuroklch() avec un canal alpha égal à la valeur alpha passée ; cela devient leresultat 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 laborder de l'élément<p>, puis nous définissons labackground-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 argumentsvar(--base-color) et0.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);}