Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

list-style-image - Propriété CSS

list-style-image

Résumé des caractéristiques de la propriété list-style-image

Description rapide
Définit une image à utiliser à la place des puces.
Statut
Standard
S'applique à
Éléments de listes.
Type de valeur
Image | Dégradé
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété list-style-image passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Listes et compteurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: Ancienne norme, obsolète

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.

Syntaxes 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().

  • list-style-image: initial; list-style-image: inherit; list-style-image: revert; list-style-image: revert-layer; list-style-image: unset;

    La valeur initiale est : none.

Exemples d'utilisation de list-style-image.

  • Microsoft Edge
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

  • Microsoft Edge
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

  • Microsoft Edge
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

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

L'animation de la propriété 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.

Prise en charge par les navigateurs (compatibilité).

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

1
list-style-image
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que list-style-image.

Les spécifications CSS éditées par le W3C sont organisées en modules. list-style-image fait partie du Module CSS - Listes et compteurs (CSS Lists and Counters Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit le pas d'incrémentation d'un compteur.
Initialise un compteur.
Change la valeur d'un ou de plusieurs compteurs.
Résumé des caractéristiques de listes à puces ou numérotées.
Définit l'emplacement des marqueurs de listes (puces ou numéros).
Définit le type des puces ou de la numérotation.
Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Fonctions.

Renvoie la valeur actuelle d'un compteur.
Renvoie la valeur d'un compteur hiérarchique.