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>
.
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 !
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.
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.
li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
li:nth-child(2)::marker { content: '!'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
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
.
Futur style de pseudo-éléments
Pour en savoir plus sur ::marker
, consultez la page suivante:
- CSS List, Markers and Counters de Smashing Magazine
- Counting With CSS Counters and CSS Grid (Compter avec des compteurs CSS et une grille CSS) de CSS-Tricks
- Utiliser des compteurs CSS à partir de MDN
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.