Compteurs CSS : donnez du style à vos listes d'éléments

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). Dans la spécification HTML5 <menu> est un parent possible de <li>.

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 :

• se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot),
• occupent automatiquement, par défaut, toute la largeur disponible dans leur parent,
• peuvent être dimensionnés à l'aide des propriétés telles que width, height, min-width, min-height,...
• 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: no-repeat; /* 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.
• Le second désavantage est la suppression d'un marquer visuel (la puce) par une image, qui peut très bien être masquée volontairement par l'utilisateur.
• 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%;

Génération de contenu avec :before

Passons à présent à un autre registre, moins souvent exploré et pourtant bien plus vaste : la génération de puces avec le pseudo-élément CSS :before.

Introduit en CSS2 (mais malheureusement reconnu qu'à partir d'Internet Explorer 8), :before permet de générer du contenu avant un élément. Ce contenu peut être une chaîne de caractère, une image de fond ou une valeur d'attribut.

Les éléments de liste sont un cobaye parfait pour ce genre d'outil, à condition de prévoir une alternative pour les anciennes versions d'Internet Explorer.

Listes non ordonnées (<ul>)

La génération de contenu en CSS passe obligatoirement par une combinaison de :before (ou :after) et de la propriété content; l'un ne va pas sans l'autre :

li {list-style-type: none;}
li:before {
	content: "- "; /* on affiche une chaîne de caractère */
}

Certains caractères complexes ou exotiques peuvent être définis d'une manière plus particulière et fondée sur le code ISO 10646 (hexadécimal) que vous pouvez trouver par exemple sur ce site : http://ascii.cl/htmlcodes.htm :

li:before {
	content: "\A4 \ "; /* caractère ISO 10646 */
}

Cependant, dans la plupart des cas - et notamment si votre encodage est en UTF-8 - il est parfaitement possible d'écrire directement le caractère (copier/coller) sans passer par des artifices ou des encodages barbares :

li:before {
	content: "→ "; /* caractère UTF-8 */
}

Enfantin, n'est-ce pas ? Voici le résultat :

Listes ordonnées (<ol>)

Le cas des listes ordonnées est quelque peu particulier, notamment parce qu'il est nécessaire de disposer d'une puce différente (numérotée ou non) pour chaque élément de liste : difficile de s'en sortir avec des images de fond, par exemple.

Pour les listes ordonnées, les spécifications CSS 2.1 prévoient la possibilité d'employer des compteurs automatiques et personnalisables : le couple counter-reset et counter-increment.

ol {counter-reset: repas;} /* on initialise et nomme un compteur */
li {
	list-style-type: none;
	counter-increment: repas; /* on incrémente le compteur à chaque nouveau li */
	margin-bottom: 10px;
}
li:before {
	content: counter(repas); /* on affiche le compteur */
	padding: 0 20px 6px;
	margin-right: 8px;
	vertical-align: top;
	background: #678;
	-moz-border-radius: 60px;
	border-radius: 60px;
	font-weight: bold;
	font-size: 0.8em;
	color: white;		
}

Les exemples d'usage des compteurs peuvent se révéler nombreux et variés, par exemple une liste de tâches entièrement stylée en CSS :

… Ou même un calendrier !

Source : http://goetter.fr/lab/css3/calendar/