list-style-image
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété CSS list-style-image
définit l'image utilisée comme puce devant les éléments de listes.
On peut également utiliser la propriété raccourcie list-style
.
Exemple interactif
Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display
vaut list-item
). Par défaut, cela inclut les éléments <li>
. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à <ol>
ou à <ul>
).
Syntaxe
/* Valeurs avec un mot-clé*/
list-style-image: none;
/* Valeurs pointant vers une image */
list-style-image: url("starsolid.gif");
/* Valeurs avec une image */
list-style-image: linear-gradient(to left bottom, red, blue);
/* Valeurs globales */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: unset;
Valeurs
<image>
-
Une valeur représentant une image valide, qui sera utilisée comme puce.
none
-
Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec
list-style-type
sera utilisé à la place.
Définition formelle
Valeur initiale | none |
---|---|
Applicabilité | éléments de liste |
Héritée | oui |
Valeur calculée | The keyword none or the computed <image> |
Type d'animation | discrète |
Syntaxe formelle
list-style-image =
<image> |
none
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Exemples
Utiliser une URL
HTML
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
CSS
ul {
list-style-image: url("starsolid.gif");
}
Résultat
Utiliser un dégradé
HTML
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
CSS
ul {
font-size: 200%;
list-style-image: linear-gradient(to left bottom, red, blue);
}
Résultat
Spécifications
Specification |
---|
CSS Lists and Counters Module Level 3 # image-markers |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
list-style
list-style-type
list-style-position
- La fonction
url()