Propriété CSS list-style-image

La propriété CSS list-style-image remplace le marqueur d'élément de liste par défaut (le disque, le cercle ou le numéro) par une image de votre choix. C'est le moyen le plus simple de donner des puces personnalisées à un <ol> ou un <ul> — une coche, une flèche, une icône — sans ajouter de balisage supplémentaire.

Cette page explique ce que fait la propriété, les valeurs qu'elle accepte, comment le marqueur est dimensionné, les pièges courants et comment elle s'intègre dans la propriété raccourcie list-style.

Quand l'utiliser

Utilisez list-style-image lorsque vous souhaitez des puces décoratives provenant d'une image unique et petite, sans avoir besoin de contrôler précisément la taille ou l'espacement de la puce. Si vous avez besoin d'un contrôle précis sur le marqueur (taille, espacement, alignement), l'approche moderne consiste à utiliser un pseudo-élément ::marker ou un background-image sur chaque <li> avec padding-left — list-style-image ne vous permet pas de redimensionner l'image, donc un graphique trop grand dominera la ligne.

Comment le marqueur est dimensionné

Si l'image possède une largeur et une hauteur intrinsèques, elles sont utilisées directement comme taille du marqueur. Si l'image possède un rapport d'aspect intrinsèque ainsi qu'une seule dimension intrinsèque, la dimension manquante est calculée à partir du rapport. Étant donné qu'il n'existe pas de CSS pour mettre à l'échelle le marqueur, préparez l'image à la taille souhaitée (généralement 16×16 ou moins).

La propriété list-style-image s'applique aux éléments de liste et à tout élément dont display est défini sur list-item. Par défaut, cela signifie les éléments <li>, mais vous pouvez également la définir sur le parent <ol> ou <ul>, où elle est héritée par les éléments de liste.

Info

Si l'image ne se charge pas, le marqueur se replie sur la valeur list-style-type (un disque par défaut). Conservez toujours un list-style-type approprié afin que les images non chargées ne laissent pas votre liste sans puces.

Valeur initiale	none
S'applique à	Éléments de liste.
Hérité	Oui.
Animatable	Non.
Version	CSS1
Syntaxe DOM	object.style.listStyleImage = 'url("image.jpg")';

Syntaxe

Syntaxe de la propriété CSS list-style-image

list-style-image: none | <url> | image-set() | initial | inherit;

Exemple de la propriété list-style-image :

Exemple de la propriété CSS list-style-image avec la valeur none

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: none;
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS list-style-image](/uploads/media/default/0001/04/3253cd4b1e6f2bdbce6333da58573f6d8a9a0d53.png "CSS list-style-image none result" =420x)

Exemple de la propriété list-style-image avec une URL source d'image :

Exemple de la propriété CSS list-style-image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Utilisation de la propriété raccourcie list-style

En pratique, l'image est généralement définie en même temps que le type et la position du marqueur via la propriété raccourcie list-style. Les deux règles ci-dessous sont équivalentes :

/* Longhand */
ul {
  list-style-type: square;
  list-style-position: inside;
  list-style-image: url("arrow.png");
}

/* Shorthand — type, position, image in any order */
ul {
  list-style: square inside url("arrow.png");
}

Le square est ici le marqueur de repli utilisé pendant le chargement de l'image ou si elle est indisponible. Voir list-style-position pour la différence entre inside et outside.

Valeurs

Valeur	Description	Essayer
`none`	Aucune image n'est affichée. Le marqueur défini par list-style-type est utilisé à la place. C'est la valeur par défaut.	Essayer »
`<url>`	L'URL source de l'image à utiliser comme marqueur d'élément de liste, écrite sous la forme `url("path/to/image.png")`.	Essayer »
`image-set()`	Un ensemble de candidats d'image parmi lesquels le navigateur choisit en fonction de l'environnement de rendu, par exemple la résolution de l'écran. Permet de servir une image plus nette aux écrans haute densité.	Essayer »
`initial`	Réinitialise la propriété à sa valeur par défaut (`none`).	Essayer »
`inherit`	Hérite la valeur de l'élément parent.

Compatibilité des navigateurs et accessibilité

list-style-image est prise en charge par tous les navigateurs modernes (elle remonte à CSS1). Deux points à garder à l'esprit :

L'image est purement décorative — les lecteurs d'écran ne l'annoncent pas et il n'y a pas de texte alt. N'encodez pas de signification dans la puce qui ne soit pas également présente dans le texte de la liste.
La couleur du marqueur suit la color du texte pour list-style-type, mais une image conserve ses propres couleurs. Si vous souhaitez que la puce corresponde à la couleur du texte, utilisez plutôt une approche ::marker ou background-image.

Exercice

Pratique

Quelle est la fonction de la propriété 'list-style-image' en CSS ?

Elle permet de définir une image comme marqueur de puce pour les listes.Elle permet de changer la couleur des éléments de liste.Elle contrôle la taille des éléments de liste.Elle est utilisée pour spécifier l'image à utiliser comme marqueur d'élément de liste.