CSS / list-style-image : images, dimensions et marqueurs de repli

CSS list-style-image spécifie une image pour le marqueur d'un élément de liste. Elle est généralement définie sur ul ou ol et héritée par leurs éléments li. Si aucune image utilisable n'est disponible, le marqueur list-style-type est utilisé à la place, donc définissez également une solution de repli appropriée.

Rôle et valeurs de list-style-image

La valeur initiale est none, et la propriété est héritée. Les marqueurs appartiennent aux éléments avec display: list-item, tels que les éléments li ordinaires. La définir sur ul fonctionne généralement parce que les éléments de la liste héritent de la valeur ; cette propriété n’ajoute pas d’image de fond à ul lui-même.

Dans la syntaxe, url() est une fonction contenant une URL, non le mot nu url. Le type d'animation est discret, ce qui ne signifie pas que deux images se transforment en douceur l'une en l'autre. MDN list-style-image référence

Un exemple complet à copier

Enregistrez le code complet ci-dessous sous le nom list-marker.html en UTF-8 et ouvrez-le dans un navigateur. Aucune bibliothèque, serveur ou fichier image séparé n'est nécessaire. SVG, Scalable Vector Graphics, est un format d'image vectorielle ; cet exemple intègre un cercle bleu de 16×16 dans une URL de données. Les mots en anglais sont des éléments de comparaison.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer les marqueurs de liste en image</title>
  <style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .image-list {
      list-style-type: square;
      list-style-position: outside;
      list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230066cc'/%3E%3C/svg%3E");
      font-size: 20px;
      max-width: 22rem;
      padding-inline-start: 2rem;
    }
    .image-list li { margin-block: .5rem; }
    .large { font-size: 32px; }
    .reset { list-style-image: none; }
  </style>
</head>
<body>
  <h1>Comparer les marqueurs de liste en image</h1>
  <h2>list-style-image</h2>
  <ul class="image-list"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>font-size: 32px</h2>
  <ul class="image-list large"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>list-style-image: none</h2>
  <ul class="image-list reset"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
</body>
</html>

Le résultat attendu est un marqueur circulaire bleu dans les deux premières listes et des marqueurs carrés dans la troisième. Seul le texte augmente à 32px dans la deuxième liste. Lorsque le deuxième élément long passe à la ligne, comparez l'alignement d'un marqueur externe avec son texte. Après avoir modifié le fichier, enregistrez-le et rechargez-le.

Distinguer la taille de l’image et celle du texte

Ce SVG spécifie explicitement une largeur et une hauteur de 16, donnant au marqueur image des dimensions de 16×16 pixels CSS. Augmenter le texte de 20px à 32px n'agrandit pas automatiquement cette image proportionnellement. Il est également inexact de dire que chaque image de marqueur utilise toujours ses dimensions pixel originales : la taille peut différer lorsqu'une image n'a pas de dimensions ou de ratio intrinsèques.

list-style-image n'a pas de paramètre séparé de largeur ou de hauteur pour le marqueur. Préparez un petit élément de marqueur ou donnez au SVG des dimensions appropriées. Les propriétés prises en charge par ::marker sont également limitées ; définir la largeur et la hauteur là-bas ne permet pas de redimensionnement arbitraire de l'image. Pour une taille et un espacement précis, envisagez un design avec image de fond séparée ou un pseudo-élément tout en préservant la sémantique de la liste et les informations textuelles réelles. MDN : propriétés prises en charge par ::marker

Supprimer les images et vérifier la notation raccourcie

Pour ne supprimer que l'image, définissez list-style-image: none comme ci-dessous. L'exemple conserve list-style-type: square, donc les marqueurs carrés apparaissent. Comparez le changement et restaurez la déclaration url() originale pour réafficher l'image. Le marqueur de repli est également utilisé lorsque le chargement de l'image échoue et qu'aucune image utilisable n'est disponible.

.image-list {
  list-style-image: none;
}

Le raccourci list-style suivant réinitialise également le composant image omis. L'appliquer plus tard peut donc supprimer une image déclarée précédemment. Vérifiez s'il y a un remplacement par un raccourci ultérieur, et utilisez des propriétés individuelles ou incluez l'image dans le raccourci selon votre intention.

.image-list {
  list-style: square outside;
}

Vérifier les marqueurs manquants

1. Vérifiez l'URL de l'image et la réponse. Une URL relative dans une feuille de style externe est résolue par rapport à ce fichier CSS, et non au fichier HTML. Une URL dans un élément style suit l'URL de base du document. Utilisez le panneau Réseau dans les outils de développement pour vérifier les réponses 404 et les formats d'image invalides.
2. Inspectez les valeurs calculées de list-style-image et display de l'élément li sélectionné. Vérifiez s'il existe un raccourci list-style ou une règle de priorité plus élevée qui remplace la valeur. Vérifiez également si display a pris une valeur telle que flex, de sorte que l'élément ne génère plus de marqueur de liste.
3. Avec un positionnement extérieur, une indentation insuffisante ou le paramètre overflow d'un parent peut couper le marqueur. Vérifiez le padding de la liste et le découpage. Si une politique du site bloque les URLs de données, remplacez l'image exemple par une URL d'image autorisée.

Les listes imbriquées peuvent également hériter de cette propriété. Pour supprimer les images d'une liste imbriquée, appliquez explicitement list-style-image: none à cette liste et définissez son list-style-type sur la valeur souhaitée.

Préserver le sens et l’accessibilité de la liste

Le cercle bleu ici est décoratif. Mettez les significations importantes telles que l'achèvement, les avertissements ou les évaluations dans le texte réel de l'élément de liste, plutôt que seulement dans une image CSS. Les marqueurs CSS ne fournissent pas d'attribut alt de type img HTML, donc ne supprimez pas d'informations en supposant que l'image se chargera ou sera annoncée.

Donner à un ol le même marqueur d'image remplace ses numéros visibles par des images. Conservez les numéros d’origine lorsque les lecteurs ont besoin d’une numérotation des étapes. Préservez la structure ul, ol et li, et vérifiez que les éléments et leur séquence restent compréhensibles sans images. Définition W3C des marqueurs de liste d'images