Une liste HTML, <ul> ou <ol>, arrive avec ses puces ou ses numéros par défaut, un style hérité du navigateur qui ne correspond presque jamais à une maquette moderne. La propriété list-style, et son trio de propriétés détaillées, permet de tout reprendre : le symbole, sa position, ou une image personnalisée.
Elle revient constamment dans un cas précis : la barre de navigation. Une nav est presque toujours construite avec une liste, pour des raisons sémantiques, puis débarrassée de ses puces en CSS pour ressembler à une rangée de liens plutôt qu'à une liste à puces.
Définition
list-style est un raccourci qui regroupe trois propriétés : list-style-type, le symbole utilisé, list-style-position, l'emplacement du symbole par rapport au texte, et list-style-image, une image à la place du symbole par défaut. Elle s'applique aux éléments <ul>, <ol> et directement à chaque <li> si besoin d'un contrôle plus fin.
Les trois propriétés en détail
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: none;
}
/* équivalent en une seule ligne */
ul {
list-style: square inside;
}| Propriété | Rôle | Valeurs fréquentes |
|---|---|---|
list-style-type | Le symbole ou le style de numérotation | disc, circle, square, decimal, none |
list-style-position | Le symbole à l'intérieur ou à l'extérieur du bloc de texte | outside (par défaut), inside |
list-style-image | Une image en guise de puce | url(...), none |
list-style-position mérite une attention particulière : avec la valeur outside par défaut, la puce est placée en dehors de la boîte du texte, ce qui décale légèrement l'alignement d'un texte sur plusieurs lignes par rapport au premier caractère. Avec inside, la puce fait partie du flux du texte, ce qui change l'indentation des lignes suivantes.
Personnaliser une puce avec une image ou du contenu généré
list-style-image accepte une image mais offre peu de contrôle sur sa taille ou son alignement. En pratique, beaucoup de projets préfèrent désactiver list-style et dessiner la puce eux-mêmes avec la propriété content sur un pseudo-élément, ce qui donne bien plus de liberté.
ul.checklist {
list-style: none;
padding-left: 0;
}
ul.checklist li {
padding-left: 1.5em;
position: relative;
}
ul.checklist li::before {
content: "✓";
position: absolute;
left: 0;
color: green;
}Piège classique : list-style: none et l'accessibilité
Retirer les puces avec list-style: none est purement visuel : cela ne change rien à la structure du document, qui reste bien une liste. Le vrai piège se situe ailleurs. Certains navigateurs, en particulier Safari, retirent aussi le rôle sémantique de liste transmis aux lecteurs d'écran dès qu'une liste n'a plus de style de puce, ce qui peut faire annoncer une simple série de liens plutôt qu'une liste de navigation.
role="list" sur le <ul> ou le <ol> concerné en plus de list-style: none. Cela force le rôle sémantique à rester présent, quel que soit le navigateur ou le lecteur d'écran utilisé.Exemple complet : une navigation horizontale
Le cas le plus fréquent d'utilisation de list-style: none reste la barre de navigation. Une nav construite en liste garde son sens pour l'accessibilité, tout en s'affichant comme une rangée de liens grâce à quelques lignes de CSS.
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
padding-left: 0;
margin: 0;
}
nav ul li a {
text-decoration: none;
font-weight: 600;
}Dans un projet plus grand, les classes de ce type de composant suivent souvent une convention comme BEM, par exemple nav__list et nav__item, plutôt que des sélecteurs génériques comme ul et li, pour éviter qu'un style destiné à cette navigation ne s'applique par erreur à une autre liste de la page.
FAQ
list-style: none supprime-t-il aussi l'indentation par défaut de la liste ?Non, ces deux comportements sont indépendants. La marge et le padding par défaut d'une liste viennent d'autres propriétés, qu'il faut retirer séparément avec margin: 0 et padding: 0 si l'on veut un alignement complètement à plat.
Oui, avec une déclaration comme list-style-type: "🚀 ", en plaçant une chaîne de caractères entre guillemets directement comme valeur, une syntaxe prise en charge par les navigateurs récents pour remplacer les symboles classiques.
Oui, mais ce réglage passe par l'attribut HTML start sur la balise <ol>, ou par la propriété CSS counter-reset combinée à un compteur personnalisé, plutôt que par list-style elle-même, qui ne gère que l'apparence du symbole.