list-style-image - Propriété CSS
Résumé des caractéristiques de la propriété list-style-image
none
none
list-style-image
passe d'une valeur à l'autre sans transition.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
.
list-style-image
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.