Le blog de Philippe Poisse

Edit du 30 octobre 2017 : Si vous cherchez un tutoriel pour LibreOffice c'est ici : http://blog.philippe-poisse.eu/index.php?post/2017/10/30/Des-puces-personnalis%C3%A9es-avec-LibreOffice

Exemples

Pour bien comprendre de quoi ce tuto parle voici deux exemples, le premier avec une liste à puces classiques et le second avec des puces en couleur.

Liste classique

• South Park
• Agents of S.H.I.E.L.D.
• Plus belle la vie

Liste avec des puces en couleur

• The Big Lebowsky
• Les Deux Tours
• Akira

En passant, un intrus s’est glissé dans la liste, sauras-tu le retrouver ?

Pseudo-élément

Comme vous pouvez le voir le code HTML des deux listes est quasiment identique. La seule différence est la présence d’une classe pour les « li » de la deuxième liste.
Donc tout ce passe au niveau du CSS.

S’il existe une propriété « list-style » et des propriétés dérivées de celle-ci (list-style-position, list-style-image, etc.) il n’existe pas de propriété « list-style-color » permettant de gérer la couleur de la puce.
Le but de la manœuvre étant de colorier les puces sans toucher au code HTML il va falloir utiliser un pseudo-élément pour insérer la puce de façon dynamique.
En CSS2 et en CSS3 il existe le pseudo-élément « before ».
En CSS2 la notation est «:before » et en CSS3 elle est «::before ». En cas de doute sur la compatibilité du navigateur avec le CSS3 n’hésitez pas à utiliser les deux.

La document de Mozilla sur le pseudo-élément « before » :
https://developer.mozilla.org/fr/docs/CSS/:before

Liste non-ordonnée

Chacun des « li » doit appartenir à la classe « puce_couleur ». Vous êtes libre d’appeler la classe autrement, c’est un pays libre ici.
La première chose à faire est de rendre les puces automatiques invisibles :
« list-style-type: none; »
Maintenant que la liste n’a plus de puce on peut créer le pseudo-élément.

.puce_couleur::before {
	content: "◾";
	color: red;
}

La propriété « content » va servir à gérer le ou les caractères à insérer. Tous les caractères reconnus par l’encodage de votre page (de préférence de l’UTF8) sont disponibles. Ça autorise des puces assez rigolotes. Les guillemets sont obligatoires, sinon ça plante.
La propriété « color » va déterminer la couleur de la puce. Il est possible d’utiliser des couleurs nommées ou des codes hexadécimaux. Rien d’extraordinaire là aussi.
Une petite astuce : pour avoir un peu d’espace après la puce il suffit de mettre un « padding-right ».

Le code de l’exemple :

.puce_couleur::before {
	content: "◾";
	color: red;
	padding-right: 1em;
}

Liste ordonnée

Le problèmes dans le cas des listes ordonnées c’est que la puce, c’est-à-dire le numéro de l’item, doit être généré de façon dynamique. Donner un caractère spécifique à la propriété « content » ne sera d’aucune utilité.
À la table il faut utiliser la fonction « counter() ».
Pour que le compteur s’incrémente il faudra passer un paramètre à la fonction, par exemple « compteur ». Le paramètre sera créé avec la propriété « counter-increment » dans la classe « puce_couleur_ordonne ». Dans le cas contraire votre compteur risque de rester bloquer à 0.

.puce_couleur_ordonnee {
	counter-increment: compteur;
}

.puce_couleur_ordonnee::before {
	content: counter(compteur);
	color: red;
}

Un exemple de liste ordonnée

1. Se lever tard le matin
2. Ne rien faire de la journée
3. Passer la soirée sur le Web
4. Se coucher tard dans la nuit

Le code

.puce_couleur_ordonnee {
	list-style-type: none;
	counter-increment: compteur;
}

.puce_couleur_ordonnee::before {
	content: counter(compteur);
	color: red;
	padding-right: 1em;
}

Living in the futur

Les spécifications de CSS3 prévoient une pseudo-élément « marker » pour gérer les puces. Pour l’instant il n’est implémenté par aucun navigateur. C’est un peu dommage, certes, mais cela n’a pas tellement d’effet pour le webdesigner lambda. Lire les spécifications des listes sur le site du W3C :
http://www.w3.org/TR/css3-lists/#marker-pseudo-element