Type CSS <dashed-ident>

Syntaxe

La syntaxe de <dashed-ident> est similaire à celle des identifiants CSS (comme les noms de propriétés), à l'exception près qu'elle est sensible à la casse. Il s'agit d'un identifiant défini par l'utilisateur·ice précédé de deux tirets (--).

Le double tiret au début permet de les identifier facilement lors de la lecture d'un bloc de code CSS et aide à éviter les conflits de noms avec les mots-clés CSS standards.

Comme pour <custom-ident>, les <dashed-ident> sont définis par l'utilisateur·ice. Cependant, certains <custom-ident> sont définis par le langage CSS lui-même ; les <dashed-ident> ne seront jamais définis dans CSS.

Exemples

Utiliser les propriétés personnalisées CSS

Lorsqu'un <dashed-ident> est utilisé comme une propriété personnalisée CSS, la propriété est d'abord déclarée, puis le <dashed-ident> est utilisé dans une fonction CSS var().

html {
  --primary-color: red;
  --secondary-color: blue;
  --tertiary-color: green;
}

h1,
h4 {
  color: var(--primary-color);
}

h2,
h5 {
  color: var(--secondary-color);
}

h3,
h6 {
  color: var(--tertiary-color);
}

Utiliser @color-profile

Lorsqu'un <dashed-ident> est utilisé avec la règle @color-profile, la règle est d'abord déclarée, puis le <dashed-ident> est utilisé dans une fonction CSS color().

@color-profile --my-color-profile {
  src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

.header {
  background-color: color(--my-color-profile 0% 70% 20% 0%);
}

Utiliser @font-palette-values

Lorsqu'un <dashed-ident> est utilisé avec la règle @font-palette-values, la règle est d'abord déclarée, puis le <dashed-ident> est utilisé comme valeur pour la propriété font-palette.

@font-palette-values --my-palette {
  font-family: Bixa;
  base-palette: 1;
  override-colors: 0 red;
}

h1,
h2,
h3,
h4 {
  font-palette: --my-palette;
}

Spécifications

Compatibilité des navigateurs

Ce type n'est pas un véritable type mais un type de commodité utilisé pour simplifier la définition d'autres syntaxes CSS ; il n'existe donc pas d'informations de compatibilité des navigateurs pour celui-ci.

Voir aussi

• Le type de donnée <ident>
• Le type de donnée <custom-ident>