List-style-image - Propriété CSS

Schéma de la syntaxe de list-style-image.

Description des termes utilisés sur le schéma :

• url est une URL vers un fichier image.
• gradient est un dégradé de couleurs, défini via l'une des fonctions de dégradé de CSS : conic-gradient(), linear-gradient(), radial-gradient(), repeating-conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient().

Description de la propriété list-style-image.

list-style-image remplace les marqueurs ou la numérotation des listes par une image ou par un dégradé de couleurs. Lorsqu'elle est positionnée sur une valeur différente de none, cette propriété rend inopérante la propriété list-style-type.

Veillez à ce que les dimensions de l'image soient compatibles avec la taille des caractères car il ne sera pas possible$ de dimensionner l'image utilisée comme marqueur.

Remarque : list-style-image est sans effet si la propriété content appliquée au pseudo-élément ::marker a la valeur none.

Consultez également la page sur la propriété résumée list-style.

Valeurs pour list-style-image.

• list-style-image: none;

  La puce ou le numéro sont affichés conformément à la propriété list-style-type.

• list-style-image: url('chemin/fichier');

  L'image spécifiée par la fonction url() remplace les puces ou les numéros.

• list-style-image: linear-gradient(...); list-style-image: radial-gradient(...); list-style-image: conic-gradient(...);

  L'image utilisée pour les puces peut être réalisée avec un dégradé. Reportez-vous à la description de ces fonctions pour plus de précisions sur leur syntaxe : linear-gradient(), radial-gradient(), conic-gradient() et les fonctions équivalentes en dégradés répétitifs.

• list-style-image: initial; (none) list-style-image: inherit; list-style-image: revert; list-style-image: revertLayer; list-style-image: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété list-style-image.

Exemple d'animation de list-style-image.

L'animation de la propriété List-style-image la fait passer de la première valeur à la dernière sans transition, mais plusieurs navigateurs, dont Chrome, appliquent un effet de fondu entre les images.

• 1996 - La première version de CSS, devient une recommandation du W3C.
• Mai 1998 - Publication de la recommandation CSS2.
• Février 2004 - Recommandation de la version CSS2.1, qui sera reprise ensuite pour être republiée en juin 2011.
• 1999 - CSS devient modulaire, chacun des modules évoluant à son rythme.

Le deuxième exemple montre qu'il est possible d'animer la couleur des marqueurs de façon progressive en utilisant une des fonctions de dégradé. Pour un effet plus spectaculaire, l'animation a été appliquée avec des durées différentes sur chacune des balises li.

• 1996 - La première version de CSS, devient une recommandation du W3C.
• Mai 1998 - Publication de la recommandation CSS2.
• Février 2004 - Recommandation de la version CSS2.1, qui sera reprise ensuite pour être republiée en juin 2011.
• 1999 - CSS devient modulaire, chacun des modules évoluant à son rythme.

Accéder à la propriété list-style-image par programme.

Modifier la valeur de la propriété list-style-image avec Javascript (ou JQuery) pose un problème particulier : la valeur étant une URL, elle contient probablement des apostrophes ou des guillemets : il faut veiller à ne pas créer de confusion avec le séparateur de chaîne de Javascript qui est aussi le guillemet ou l'apostrophe. Plusieurs solutions existent, nous avons choisi dans ces exemples d'utiliser l'apostrophe en tant que délimiteur pour CSS et le guillemet comme délimiteur Javascript.

Avec Javascript, modifier la valeur de list-style-image.

En Javascript, voici comment modifier la valeur de list-style-image. JS accepte deux syntaxes : une avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['list-style-image'] = "url('img/list-style-image-1.png')"; // ou let el = document.getElementById('id'); el.style.listStyleImage = "url('img/list-style-image-1.png')";

Avec Javascript, lire la valeur de list-style-image.

Ce code retrouve la valeur de la propriété si elle a été affectée directement à l'élément lui-même et non pas via un sélecteur.

let el = document.getElementById('id'); let value = el.style['list-style-image']; // ou let el = document.getElementById('id'); let value = el.style.listStyleImage;

Avec Javascript, lire la valeur calculée de list-style-image.

La valeur calculée est une valeur affectée via un sélecteur ou directement sur l'élément avec l'attribut style, ou celle qui résulte de la cascade des héritages.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('list-style-image');

Avec JQuery, modifier la valeur de list-style-image.


$('#id').css('list-style-image', "url('img/list-style-image-1.png')");
// ou
$('#id').css('listStyleImage', "url('img/list-style-image-1.png')");


Avec JQuery, lire la valeur calculée de list-style-image.

let value = $('#id').css('list-style-image');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété et affichent ensuite soit la valeur telle qu'elle a été appliquée (premier bouton), soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de list-style-image. On constate en particulier que l'URL est transformée en URL absolue.

Compatibilité des navigateurs avec list-style-image.

Tous les navigateurs reconnaissent la propriété list-style-image.

1

Propriété
list-style-image

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété list-style-image.

La propriété list-style-image n'a pas évolué depuis la première spécification du langage CSS. Mais le type image peut, depuis le niveau 3 de la spécification, être défini comme un dégradé de couleurs.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Définition initiale de la propriété list-style-image dans la première spécification du langage CSS.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Pas de changement concernant cette propriété, à part le fait qu'elle accepte la valeur inherit.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Listes et compteurs - Niveau 3

  L'image peut maintenant être définie comme un dégradé de couleurs.
  

  20 Février 2002

  Document de travail.

  

  

  

Voir aussi, au sujet des listes et compteurs.

Le module de spécification qui regroupe les définitions concernant les listes à puces et les listes numérotées s'appelle CSS Lists and Counters Module (Module CSS - Listes et compteurs). La propriété list-style-image et les propriétés ci-dessous sont décrites dans ce module :

Propriétés :

Fonctions :