Comment supprimer les puces d'une liste avec "list-style: none"

Dans le développement web, vous aurez souvent besoin de personnaliser l'apparence des listes. Cette personnalisation peut aller de la modification des espacements à la suppression totale des puces ou des numéros pour les listes ordonnées et non ordonnées. C'est exactement ce que le quiz questionne dans la réponse correcte : "type de liste : aucune".

En CSS (Cascading Style Sheets), la propriété "list-style" est utilisée pour changer l'apparence des éléments de liste. Si vous souhaitez supprimer les puces d'une liste, vous pouvez utiliser "list-style: none".

Voici un exemple pratique pour bien comprendre :

ul {
  list-style: none;
}

Dans cet exemple, ul fait référence à tous les éléments de liste non ordonnée (unordered list). L'instruction list-style: none assure qu'aucune puce ne sera affichée à côté des éléments de la liste.

À noter que la propriété "list-style" est en réalité une shorthand property, ce qui signifie qu'elle définit plusieurs autres propriétés en même temps. Dans notre cas, "none" annule à la fois le "list-style-type" (le type de puce ou de numéro) et le "list-style-image" (une image utilisée comme puce).

Vous pouvez aller plus loin en personnaliser la liste, en ajoutant par exemple des images ou des icônes à la place des puces traditionnelles à l'aide de la propriété "list-style-image". Veuillez toutefois noter que l'utilisation de "list-style: none" désactivera tout style lié à "list-style-image" ou "list-style-type". Pour contourner cela, vous devrez définir séparément les propriétés en question.

Le respect des bonnes pratiques en matière de CSS, comme l'organisation du code et l'utilisation de shorthand properties lorsque cela est possible, peut améliorer non seulement la lisibilité et la maintenance du code, mais aussi les performances de votre site web.