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.

  • Premier élément.
  • Deuxième élément.
  • Troisième élément.
• list-style-image: url('chemin/fichier');

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

  • Premier élément.
  • Deuxième élément.
  • Troisième élément.
• 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.

  • Premier élément.
  • Deuxième élément.
  • Troisième élément.
• 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é list-style-image 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

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Firefox pour Androïd

Chrome

Edge

Safari

Opéra

Safari sur IOS

Androïd Brower

Chrome pour Androïd

KaiOS Browser

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

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant list-style-image. 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

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant list-style-image. 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

  Concernant list-style-image. 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 Module CSS - Listes et compteurs (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 :