Donnez du style à vos listes d'éléments HTML 1 - Style des listes d'éléments HTML : les solutions les plus courantes

Modifier ou designer les puces des éléments de liste n'est pas forcément de tout repos. Aux côtés des images de fond, d'autres techniques, plus simples à maintenir, mais moins connues, existent.

Modifier ou designer les puces des éléments de liste n'est pas forcément un exercice de tout repos : nous avons souvent recours aux images de fond bien que d'autres techniques, plus simples à maintenir, mais moins connues, existent.

Faisons le tour des méthodes utilisables aujourd'hui, avec leurs avantages et inconvénients.

Viens découvrir mon <li>

Que savons-nous exactement de l'élément <li> ?

Sa fonction selon les spécifications HTML est de structurer un élément d'une liste ordonnée (dont l'ordre est pertinent) ou non ordonnée (dont l'ordre importe peu). Son parent direct est soit un élément <ul> (liste non ordonnée), soit un <ol> (liste ordonnée), et réciproquement les <ul> et <ol> ne peuvent contenir directement que des éléments <li> (pas de conteneur intermédiaire).

Il est possible d'assigner n'importe quelle valeur de display à n'importe quel élément HTML

En terme d'affichage - donc de rendu CSS par défaut - les éléments <li> ressemblent fortement à des éléments de type block tout en bénéficiant de particularités. Et pour cause, leur valeur de display par défaut n'est pas block mais list-item.

Les caractéristiques des éléments list-item sont :

 Ils se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot),
Ils occupent automatiquement, par défaut, toute la largeur disponible dans leur parent,
 Ils peuvent être dimensionnés à l'aide des propriétés telles que width, height, min-width, min-height...
 Ils peuvent bénéficier des propriétés CSS liées aux puces (list-style, list-style-type, list-style-image, list-style-position...).

N'hésitez pas à en découvrir plus sur les différents types d'affichage par défaut.

Dans la pratique, il est possible d'assigner n'importe quelle valeur de display à n'importe quel élément HTML : ainsi, une liste peut s'afficher horizontalement si ses éléments <li> sont rendus en display: inline. De même un paragraphe peut disposer de puces s'il est affiché en display: list-item.


Les basiques : list-style

Les propriétés list-style-type et list-style-image existent depuis la version initiale de CSS, en 1996. Elles permettent de modifier le visuel de la puce associée aux éléments de liste <li>.

list-style-type

La propriété list-style-type définit l'aspect de la puce sous forme graphique (glyphe) ou numérique pour les listes numérotées :

 Les valeurs de glyphes sont disc, circle et square.
 Les valeurs pour les systèmes de numérotation sont : decimal, lower-roman, upper-roman, hebrew, armenian, katakana, etc.
 La valeur supprimant la puce est none.

Vous en conviendrez avec moi : les options graphiques sont plutôt restreintes et les choix sont vite faits.

list-style-image

La propriété list-style-image offre la possibilité de remplacer la puce classique par une image dont vous aurez indiqué le chemin.

Là encore, le périmètre créatif se révèle limité, notamment parce qu'il n'est pas vraiment possible de positionner l'image précisément (même avec list-style-position), il faut généralement retailler ou redimensionner l'image.

L'image de fond : background-image

À l'instar de n'importe quel élément HTML, les items de liste ont la faculté de pouvoir disposer d'image d'arrière-plan grâce à la propriété background-image.

Il est ainsi possible de remplacer la puce initiale par l'image de son choix :

 li { 
   list-style-type: none; /* on annule la puce par défaut */ 
   background-image: url(image.png); /* on affiche l'image souhaitée */ 
   background-repeat: none; /* on annule la répétition par défaut */ 
   background-position: left center; /* on positionne où l'on veut */ 
   padding-left: 20px; /* pour éviter la superposition du contenu */ 
} 

Cette méthode présente certains atouts mais également des faiblesses par rapport à l'usage de list-style-image :

 L'inconvénient principal est que si l'image de fond est plus haute que le contenu de la puce, une partie sera masquée. Il faut donc prévoir à l'avance la hauteur minimale de la puce.
 L'avantage est que background-position permet de placer l'image de fond au pixel près, puisque rien n'empêche des déclarations telles que background-position: 0 3px; ou encore background-position: 5% 10%;