Méthodes créatives pour styliser les listes avec CSS

Les listes par défaut du navigateur correspondent rarement à un véritable design. Que vous construisiez un menu de navigation, un tutoriel étape par étape ou une liste de fonctionnalités produit, la stylisation CSS des listes vous donne les outils pour leur donner un aspect intentionnel. Cet article couvre les techniques les plus pratiques et conformes aux standards—des propriétés natives des listes aux compteurs CSS et marqueurs personnalisés—sans sacrifier l’accessibilité.

Commencer par le bon type de liste HTML

Avant de toucher au CSS, choisissez le bon élément :

• <ul> — listes non ordonnées où la séquence n’a pas d’importance (menus de navigation, listes de fonctionnalités)
• <ol> — listes ordonnées où la séquence est significative (instructions, classements)
• <dl> — listes de description associant des termes à des définitions (glossaires, métadonnées)

Le HTML sémantique est important ici. Les lecteurs d’écran annoncent le type de liste et le nombre d’éléments, ce qui aide les utilisateurs à comprendre le contexte avant même de lire un seul élément.

Les propriétés list-style-* : votre point de départ

La propriété raccourcie list-style regroupe trois propriétés :

ul {
  list-style: square inside none;
  /* list-style-type | list-style-position | list-style-image */
}

list-style-position mérite d’être clairement comprise :

• outside (par défaut) — le marqueur se situe dans la marge, et le texte reste bien aligné
• inside — le marqueur s’écoule avec le texte, provoquant un retour à la ligne sur les éléments multi-lignes

list-style-image existe mais est limitée—vous ne pouvez pas redimensionner ou repositionner l’image. Pour des puces image personnalisées, un pseudo-élément ::before avec background-image vous donne beaucoup plus de contrôle.

Styliser les marqueurs natifs avec CSS ::marker

Le pseudo-élément ::marker vous permet de styliser directement la puce ou le numéro intégré—sans balisage supplémentaire requis :

li::marker {
  color: deeppink;
  font-size: 1.2em;
  font-weight: bold;
}

Limitation importante : ::marker ne prend en charge qu’un sous-ensemble spécifique de propriétés CSS : color, content, font-*, direction, unicode-bidi, white-space, text-combine-upright, et les propriétés d’animation/transition. Vous ne pouvez pas appliquer display, background, padding, margin, ou de positionnement. Traitez-le comme un point d’accroche de stylisation au niveau du texte, pas comme un élément complet.

La prise en charge navigateur de ::marker est bonne dans les navigateurs actuels, mais vérifiez votre matrice de navigateurs cibles. C’est généralement l’option la plus propre pour des changements simples de couleur ou de police sur les marqueurs natifs.

Puces de liste personnalisées avec ::before

Lorsque ::marker ne suffit pas—pour des puces de style icône, un alignement complexe ou des transitions—utilisez plutôt ::before :

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

ul li::before {
  content: "✓";
  color: green;
  flex-shrink: 0;
}

Note d’accessibilité : Définir list-style: none peut amener Safari/VoiceOver à cesser d’exposer l’élément comme une liste. Si la sémantique de liste est significative, ajoutez role="list" au <ul> ou <ol>.

Compteurs CSS pour les listes ordonnées stylisées

Les compteurs CSS vous donnent un contrôle total sur le formatage des listes numérotées—utile pour les listes ordonnées stylisées avec des préfixes, suffixes ou numérotation multi-niveaux personnalisés :

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: "Étape " counter(steps) ". ";
  font-weight: bold;
  color: #333;
}

Compteurs imbriqués

Pour les listes imbriquées, counters() (au pluriel) affiche la hiérarchie complète :

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: counters(steps, ".") " ";
}
/* Affiche : 1, 1.1, 1.2, 2, 2.1 */

La propriété counter-increment accepte également une taille de pas : counter-increment: steps 2 incrémente de deux à chaque fois.

Note sur @counter-style

La règle at @counter-style vous permet de définir des systèmes de comptage entièrement personnalisés—symboles personnalisés, alphabets ou motifs cycliques :

@counter-style thumbs {
  system: cyclic;
  symbols: "👍" "👎";
  suffix: " ";
}

ul {
  list-style-type: thumbs;
}

À utiliser avec précaution. La prise en charge navigateur de @counter-style reste incomplète—notamment, Safari n’a ajouté la prise en charge que dans la version 17. Testez toujours sur vos navigateurs cibles et définissez un fallback list-style-type sur le même élément pour assurer une dégradation gracieuse.

Choisir la bonne approche

Conclusion

Une bonne stylisation CSS des listes commence par du HTML sémantique et superpose des améliorations visuelles par-dessus. Utilisez ::marker pour des changements légers de couleur et de police, ::before lorsque vous avez besoin de contrôle de mise en page, et les compteurs CSS lorsque les listes ordonnées nécessitent une numérotation personnalisée. Évitez de supprimer la sémantique de liste sans la restaurer via ARIA. Chaque technique a un cas d’usage clair—choisissez celle qui correspond à votre design sans le compliquer inutilement.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..