Puces personnalisées avec CSS ::Marker

Il est désormais facile de personnaliser la couleur, la taille ou le type de numéro ou de puce lorsque vous utilisez une <ul> ou une <ol>.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Grâce à Igalia, commanditée par Bloomberg, nous pouvons enfin nous débarrasser de nos trucs et astuces pour créer des listes de styles. Tu vois !

Afficher la source

Grâce au CSS ::marker, nous pouvons modifier le contenu ainsi que certains styles de puces et de numéros.

Compatibilité du navigateur

::marker est compatible avec Firefox pour ordinateur et Android, Safari pour ordinateur de bureau et iOS Safari (mais uniquement les propriétés color et font-*, voir le Bug 204163), ainsi que les navigateurs Chromium pour ordinateur et Android.

Navigateurs pris en charge

  • 86
  • 86
  • 68
  • 11.1

Source

Pseudo-éléments

Prenons l'exemple de la liste HTML non triée suivante:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

Le rendu suivant n'est donc pas surprenant:

Le point au début de chaque élément <li> est sans frais ! Le navigateur dessine et crée une zone de repère générée pour vous.

Aujourd'hui, nous sommes ravis de vous parler du pseudo-élément ::marker, qui permet de styliser l'élément de puce créé par les navigateurs pour vous.

Créer un repère

La zone de repère du pseudo-élément ::marker est automatiquement générée dans chaque élément de la liste, avant le contenu réel et le pseudo-élément ::before.

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

En règle générale, les éléments de liste sont des éléments HTML <li>, mais d'autres peuvent également devenir des éléments de liste avec display: list-item.

<dl>
  <dt>Lorem</dt>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
  <dd>Dolores quaerat illo totam porro</dd>

  <dt>Ipsum</dt>
  <dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

Appliquer un style à un repère

Jusqu'au ::marker, il était possible d'appliquer un style aux listes à l'aide de list-style-type et list-style-image afin de remplacer le symbole de l'élément de liste par une ligne de code CSS:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

C'est pratique, mais nous avons besoin de plus. Qu’en est-il de la modification de la couleur, de la taille, de l’espacement, etc. ? C'est là que ::marker entre à la rescousse. Il permet le ciblage individuel et global de ces pseudo-éléments à partir du CSS:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

La propriété list-style-type offre des possibilités de stylisation très limitées. Le pseudo-élément ::marker signifie que vous pouvez cibler le repère lui-même et lui appliquer des styles directement. Vous bénéficiez ainsi d'un contrôle beaucoup plus important.

Cela dit, vous ne pouvez pas utiliser toutes les propriétés CSS d'un ::marker. La liste des propriétés autorisées et interdites est clairement indiquée dans la spécification. Si vous essayez quelque chose d'intéressant avec ce pseudo-élément et que cela ne fonctionne pas, la liste ci-dessous vous indique ce qui peut et ne peut pas être fait avec CSS:

Propriétés CSS ::marker autorisées

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

La modification du contenu d'un ::marker est effectuée avec content et non avec list-style-type. Dans l'exemple suivant, le style du premier élément utilise list-style-type et le second est ::marker. Dans le premier cas, les propriétés s'appliquent à l'ensemble de l'élément de la liste, et pas seulement au repère. Cela signifie que le texte s'anime en même temps que le repère. Avec ::marker, nous pouvons cibler uniquement la zone du repère, et non le texte.

Notez également que la propriété background non autorisée n'a aucun effet.

Styles de liste
li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
Résultats mixtes entre le repère et l'élément de liste
Styles de marqueur
li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
Résultats ciblés entre le repère et l'élément de la liste


Modification du contenu d'un repère

Voici différentes manières de styliser les repères.

Modifier tous les éléments de la liste

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

Modifier un seul élément de liste

li:last-child::marker {
  content: "😍";
}

Convertir un élément de liste au format SVG

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Modifier des listes numérotées Mais qu'en est-il d'un <ol> ? Par défaut, le repère d'un élément de liste numérotée est un nombre et non une puce. En CSS, ils s'appellent des compteurs et sont très puissants. Ils peuvent même définir et réinitialiser le début et la fin du numéro, ou leur attribuer des chiffres romains. Peut-on y appliquer un style ? Oui, et nous pouvons même utiliser la valeur du contenu du marqueur pour créer notre propre présentation de numérotation.

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

Débogage

Les outils pour les développeurs Chrome vous aident à inspecter, déboguer et modifier les styles qui s'appliquent aux pseudo-éléments ::marker.

Les outils de développement s&#39;ouvrent et affichent les styles du user-agent et des styles utilisateur

Futur style de pseudo-éléments

Pour en savoir plus sur ::marker, consultez la page suivante:

C'est super d'avoir accès à quelque chose qui a été difficile à styliser. Vous souhaitez peut-être appliquer un style à d'autres éléments générés automatiquement. Vous serez peut-être frustré par <details> ou l'indicateur de saisie semi-automatique du champ de recherche, qui ne sont pas implémentés de la même manière dans les navigateurs. Pour partager ce dont vous avez besoin, vous pouvez par exemple créer une demande sur https://webwewant.fyi.