Yes You Web!

Publié le 13 mars 2021 —

En HTML, vous connaissez les listes à puces non ordonnées, avec un rond noir par défaut et les listes ordonnées avec 1, 2, 3.

  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis
  • Ou pas… il y a couvre-feu…
  1. Aller au marché,
  2. Aller courir,
  3. Finir cet article,
  4. Apéro avec des amis
  5. Ou pas… il y a couvre-feu…

Eh bien sachez qu’on peut faire pas mal de choses avec ces petites puces… Nous allons voir en détail les différentes propriétés qui sont à votre disposition.

Les différentes propriétés

Les listes comptent 3 propriétés et une super propriété qui regroupe les 3 précédentes.

  • list-style-image : définit l’image utilisée comme puce devant les éléments de listes
  • list-style-position : permet de définir la position du marqueur de liste par rapport à la boîte
  • list-style-type : permet de définir l’apparence d’un élément de liste
  • list-style : super propriété qui regroupe les propriétés list en une seule

Nous allons donc passer ces 3 propriétés en revue avec des exemples et quelques astuces pour que vous puissiez utiliser pleinement vos puces.

List-style-position

Cette première propriété permet de définir la place de la puce dans la liste : à l’intérieur de la liste ou à l’extérieur. Elle comporte donc 2 valeurs : inside ou outside. Voici ce que ça donne en ajoutant une bordure aux éléments de la liste pour que vous voyez bien la différence.

  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis,
  • Ou pas… il y a couvre-feu…
Copier
  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis,
  • Ou pas… il y a couvre-feu…
Copier

List-style-type

Cette seconde propriété permet de définir le style de la puce dans la liste. Nous allons différencier ici les listes ordonnées et non ordonnées.

Dans le cadre d’une liste non ordonnée, nous avons 3 possibilités : disc, circle et square. Disc est la valeur par défaut.

  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis
  • Ou pas… il y a couvre-feu…
Copier
  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis
  • Ou pas… il y a couvre-feu…
Copier
  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis
  • Ou pas… il y a couvre-feu…
Copier

Pour une liste ordonnée, nous avons davantage de possibilités : la valeur par défaut est decimal.

  • armenian : c’est le système de comptage arménien : Ա, Բ, Գ, Դ, Ե…
  • cjk-ideographic : ce sont des chiffres idéographiques chinois
  • decimal : ce sont les chiffres décimaux classiques : 1, 2, 3, 4, 5…
  • decimal-leading-zero : ce sont les chiffres décimaux précédés d’un 0 : 01, 02, 03, 04, 05…
  • georgian : c’est le système de comptage géorgien
  • hebrew : c’est le système de comptage hébreux
  • hiragana : l’un des 4 systèmes d’écriture japonais
  • hiragana-iroha : l’un des 4 systèmes d’écriture japonais, couplé l’ancien mode des syllabes
  • katakana : un deuxième système d’écriture japonais
  • katakana-iroha : un deuxième système d’écriture japonais, couplé l’ancien mode des syllabes
  • lower-alpha : ce sont les lettres classiques en minuscules : a, b, c, d, e…
  • lower-greek : ce sont les chiffres grecs en minuscules : α, β, γ, δ, ε…
  • lower-latin : similaire à lower-alpha mais non compatible avec IE7 et inférieur
  • lower-roman : ce sont les chiffres romains en minuscules : i, ii, iii, iv, v…
  • upper-alpha : ce sont les lettres classiques en majuscules : A, B, C, D, E…
  • upper-greek : ce sont les chiffres grecs en majuscules
  • upper-latin : similaire à upper-alpha mais non compatible avec IE7 et inférieur
  • upper-roman : ce sont les chiffres romains en majuscules : I, II, III, IV, V…

Nous n’allons pas vous faire toutes les démo, mais vous pouvez vous amuser en remplaçant vous-même la valeur du list-style-type via votre inspecteur Chrome ou vous pouvez aller ici pour voir des simulations.

Que ce soit pour les listes ordonnées ou non, il est aussi possible d’inscrire la valeur « none » et de mettre en avant votre liste par un autre style CSS comme un arrière-plan ou une bordure.

  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis
  • Ou pas… il y a couvre-feu…
Copier

List-style-image

Cette dernière propriété permet de remplacer la puce par une image.

  • Aller au marché,
  • Aller courir,
  • Finir cet article,
  • Apéro avec des amis
  • Ou pas… il y a couvre-feu…
Copier

Il existe une autre méthode pour faire comme si vous mettiez une image mais sans en mettre, vous pouvez utiliser un pseudo élément avec la fonction ::before. Pour voir comment faire, lisez notre article : Utiliser les pseudo éléments en CSS.

Conclusion

Voilà, nous espérons que cet article vous aura permis de comprendre comment vous pouvez personnaliser vos puces. Si vous souhaitez découvrir d’autres propriétés CSS en action, n’hésitez pas à consulter notre guide et les exemples associés par catégorie.

Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !