Listes

Podcast CSS – 030: Listes

Imaginez que vous ayez l'intention d'acheter plusieurs articles lors de votre prochaine sortie épicerie. Une façon courante de représenter visuellement cela est une liste, mais comment pouvez-vous ajouter un style à votre liste de courses ?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Créer une liste

La liste précédente a commencé par un élément sémantique, ou <ul>, avec des éléments de liste de courses (éléments <li>) en tant qu'enfants. Si vous inspectez chaque élément <li>, vous pouvez voir qu'ils contiennent tous display: list-item. C'est pourquoi le navigateur affiche une ::marker par défaut.

li {
  display: list-item;
}

Il existe deux autres types de listes.

Les listes numérotées peuvent être créées avec <ol>, auquel cas l'élément de liste affichera un numéro en tant que ::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Les listes de descriptions sont créées avec <dl>, mais ce type de liste n'utilise pas l'élément d'élément de liste <li>.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Styles de liste

Maintenant que vous savez comment créer une liste, vous pouvez personnaliser son style. Les premières propriétés CSS à découvrir sont celles qui s'appliquent à l'ensemble de la liste.

Vous pouvez utiliser trois propriétés de style liste pour appliquer un style à votre exemple: list-style-position, list-style-image et list-style-type.

list-style-position

list-style-position vous permet de déplacer la puce vers inside ou outside le contenu de l'élément de liste. La valeur par défaut outside signifie que la puce n'est pas incluse dans le contenu des éléments de liste, tandis que inside déplace le premier élément dans le contenu de l'élément.

list-style-image

list-style-image vous permet de remplacer les puces de votre liste par des images. Cela vous permet de définir une image (url ou none, par exemple) pour transformer vos puces en images, fichiers SVG ou GIF. Vous pouvez également utiliser n'importe quel type de contenu ou même un URI de données.

Voyons comment ajouter une image de chacun de nos articles en tant que list-style-image:

list-style-type

La dernière option consiste à appliquer un style à la list-style-type. Les puces sont remplacées par des mots clés de style connus, des chaînes personnalisées, des emoji, etc. Pour connaître tous les types de style de liste disponibles, cliquez ici.

Raccourci list-style

Maintenant que vous disposez de toutes ces propriétés individuelles, vous pouvez utiliser le raccourci list-style pour définir tous nos styles de liste sur une seule ligne:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style vous permet de déclarer des combinaisons d'une, deux ou trois des propriétés list-style dans n'importe quel ordre. Si list-style-type et list-style-image sont tous deux définis, list-style-type est utilisé comme solution de remplacement si l'image n'est pas disponible.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Il s'agit de la propriété la plus couramment utilisée pour les styles de liste abordés dans cette section. list-style: none est une application courante pour masquer les styles par défaut. Les styles par défaut proviennent du navigateur, et les feuilles de style réinitialisées suppriment souvent des styles de liste tels que la marge intérieure et les marges. Vous pouvez également utiliser ce raccourci pour définir des styles, comme list-style: square inside;.

Jusqu'à présent, les exemples se sont concentrés sur l'application d'un style à une liste entière et à des éléments de liste, mais qu'en est-il d'une approche plus précise ?

Pseudo-élément ::marker

L'élément de repère list-item est une puce, un trait d'union ou un chiffre romain qui permet d'indiquer chaque élément de la liste.

Si vous inspectez la liste dans les outils de développement, vous pouvez voir un élément ::marker pour chacun des éléments de la liste, bien qu'il n'en ait pas déclaré en HTML. Si vous inspectez plus en détail ::marker, vous verrez le style par défaut du navigateur.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Lorsque vous déclarez une liste, un marqueur est attribué à chaque élément, même s'il n'y a pas de puce ni de chiffre romain dans votre code HTML. Il s'agit d'un pseudo-élément, car le navigateur le génère pour vous et fournit une API de style limitée pour le cibler. En savoir plus sur l'anatomie de la puce CSS ::marker présente une compatibilité limitée dans Safari.

Zone de repère

Dans le modèle de mise en page CSS, les repères d'élément de liste sont représentés par une zone de repère associée à chaque élément de liste. Le marqueur est le conteneur qui contient généralement la puce ou le numéro.

Pour appliquer un style à la zone du repère, vous pouvez utiliser le sélecteur ::marker. Cela vous permet de sélectionner uniquement le repère au lieu d'appliquer un style basé sur toute la liste.

Styles de repère

Maintenant que vous avez sélectionné le repère, examinons les propriétés de style disponibles pour ce sélecteur. Pour en savoir plus sur les puces personnalisées avec CSS ::marker, consultez le site web.dev.

Plusieurs propriétés CSS ::marker sont autorisées:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Type d'écran

Toutes nos propriétés list-style et ::marker savent appliquer un style aux éléments <li>, car leur valeur d'affichage par défaut est "list-item". Vous pouvez également transformer des éléments qui ne sont pas des <li> en éléments de liste.

Pour ce faire, ajoutez la propriété display: list-item. display: list-item permet par exemple d'ajouter une puce suspendue à un titre, afin de pouvoir la remplacer par un autre élément avec ::marker. L'exemple suivant montre un en-tête qui utilise display: list-item pour appliquer des styles, ainsi qu'une liste utilisant le balisage de liste correct.

Bien que vous puissiez transformer ce que vous voulez en une vue d'élément de liste avec display, vous ne devez pas l'utiliser à la place d'un balisage de liste correct, si le contenu auquel vous appliquez un style est en fait une liste. Changer l'apparence visuelle d'un élément en élément de liste ne change pas la façon dont les services d'accessibilité lisent et reconnaissent l'élément. Il ne sera donc pas lu comme un élément de liste pour les lecteurs d'écran ou les contacteurs. Vous devez toujours utiliser le balisage sémantique et créer des listes avec <li> dans la mesure du possible.

Testez vos connaissances

Tester vos connaissances sur les listes

Ressources

• Guide MDN sur les listes de styles
• Puces personnalisées avec la balise CSS ::marker
• Smashing Magazine: listes, repères et compteurs CSS
• MDN utilisant des compteurs CSS
• Module "Listes et compteurs CSS" niveau 3
• Astuces CSS: compter avec les compteurs CSS et la grille CSS