list-style-image |
Image du style de liste |
|---|---|
| CSS |
Syntaxe
|
list-style-image: paramètres; |
Paramètres
| Paramètre | Description | |
|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer le chemin URL du fichier d'image : | |
| Valeur | Description | |
| url(image.ext) | Cette valeur permet d'indiquer le nom de l'image. | |
| none | Cette valeur permet d'indiquer qu'il n'y a pas d'image. | |
Description
Cette propriété permet de fixer l'image de l'attribut de la liste.
Remarques
- Utilisation principale : La propriété list-style-image permet de remplacer les puces traditionnelles des listes (disc, circle,...) par une image personnalisée. Cela donne une grande flexibilité pour adapter le design des listes à une charte graphique ou à un thème spécifique.
- Valeur par défaut : La valeur par défaut de list-style-image est none, ce qui signifie que les listes utiliseront le style défini par list-style-type. Si aucune image n'est spécifiée, le navigateur affichera les puces classiques ou les numérotations selon le type de liste.
- Impact sur l'accessibilité : L'utilisation d'images comme puces peut compliquer l'accessibilité, surtout si elles remplacent des puces sémantiques importantes. Il est crucial de conserver une logique visuelle et de tester les listes avec des lecteurs d'écran pour s'assurer que le contenu reste compréhensible.
- Taille et alignement des images : Les images utilisées avec list-style-image ne sont pas redimensionnées automatiquement. Leur taille dépend de l'image source. Si elle est trop grande, cela peut désaligner le contenu. Pour un contrôle précis, il est conseillé d'utiliser des images de petite taille ou de styliser la liste avec des pseudo-éléments (::before).
- Fallback avec list-style-type : Lorsque list-style-image est utilisé, il est judicieux de définir un style de secours avec list-style-type. Cela garantit une présentation cohérente au cas où l'image ne serait pas chargée.
- Compatibilité navigateur Web : La propriété list-style-image est largement supportée par tous les navigateurs modernes. Cependant, certains anciens navigateurs Web ou environnements particuliers peuvent mal gérer des images SVG ou des formats non standard. Prévoir des tests pour ces cas est recommandé.
- Alternatives modernes avec CSS : Bien que list-style-image reste utile, les pseudo-éléments comme ::before offrent plus de flexibilité. Par exemple, ils permettent d'utiliser des icônes (via des polices de caractères comme Font Awesome) ou des images SVG ajustées dynamiquement, tout en maintenant une meilleure gestion du design et de l'accessibilité.
Voir également
Articles - URL (Uniform Resource Locator)
Dernière mise à jour : Dimanche, le 20 décembre 2015