Listes

Imaginez que vous avez une liste d'articles que vous prévoyez d'acheter lors de votre prochain passage au supermarché. Une façon courante de représenter cela visuellement 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>) comme enfants. Si vous inspectez chaque élément <li>, vous pouvez voir qu'ils ont tous display: list-item, c'est pourquoi le navigateur affiche un ::marker par défaut.

li {
  display: list-item;
}

Il existe deux autres types de listes.

Vous pouvez créer des listes triées avec <ol>. Dans ce cas, l'élément de liste affiche un nombre comme ::marker.

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

Les listes de description 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Maintenant que vous savez créer une liste, vous pouvez lui appliquer un style. Les premières propriétés CSS à découvrir sont celles qui sont appliquées à l'ensemble de la liste.

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

list-style-position

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

Liste avec des repères ::outside et ::inside, qui montrent que l&#39;élément &quot;outside&quot; (valeur par défaut) ne se trouve pas dans l&#39;élément de liste, mais dans la zone de contenu de l&#39;élément de liste.

list-style-image

list-style-image vous permet de remplacer les puces de votre liste par des images. Vous pouvez ainsi définir une image telle qu'un url ou un none pour que vos puces soient une image, un SVG ou même un GIF. Vous pouvez également utiliser n'importe quel type de média ou même un URI de données.

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

list-style-type

La dernière option consiste à styliser list-style-type, ce qui remplace les puces par des mots clés de style connus, des chaînes personnalisées, des emoji, etc. Pour consulter tous les types de styles de liste possibles, cliquez ici.

Abréviation list-style

Maintenant que vous disposez de toutes ces propriétés individuelles, vous pouvez utiliser l'abréviation list-style pour définir tous nos styles de liste en 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 secours 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 des 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. Vous voyez souvent des feuilles de style de réinitialisation supprimer des styles de liste tels que la marge intérieure et les marges. Vous pouvez également utiliser cette abréviation pour définir des styles, comme list-style: square inside;.

Jusqu'à présent, les exemples se sont concentrés sur le style d'une liste entière et des éléments de liste, mais que faire d'une approche plus précise ?

Pseudo-élément ::marker

L'élément de repère list-item correspond au point, au tiret ou au chiffre romain qui permet d'indiquer chaque élément de votre liste.

Liste de trois éléments montrant que chacune des puces est un pseudo-élément ::marker.

Si vous inspectez la liste dans DevTools, vous pouvez voir un élément ::marker pour chacun des éléments de liste, même si vous n'en avez pas déclaré en HTML. Si vous inspectez plus en détail l'::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 repère est attribué à chaque élément, même si aucun point ou chiffre romain n'est utilisé 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 stylisation limitée pour le cibler. En savoir plus sur l'anatomie de la puce CSS ::marker est compatible de façon limitée dans Safari.

Case de repère

Dans le modèle de mise en page CSS, les repères d'éléments de liste sont représentés par un cadre de repère associé à chaque élément de liste. La zone de repère est le conteneur qui contient généralement le point ou le numéro.

Pour styliser le cadre du repère, vous pouvez utiliser le sélecteur ::marker. Cela vous permet de ne sélectionner que le repère au lieu de styliser l'ensemble de 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 web.dev.

De nombreuses 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 styliser les éléments <li>, car leur valeur d'affichage par défaut est "élément de liste". 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. Vous pouvez utiliser display: list-item, par exemple, si vous souhaitez ajouter une puce suspendue à un titre afin de pouvoir la remplacer par un autre élément avec ::marker. L'exemple suivant montre un titre utilisant display: list-item à des fins de style, avec une liste utilisant une balise de liste appropriée.

Vous pouvez transformer n'importe quel élément en vue d'élément de liste avec display. Toutefois, vous ne devez pas utiliser cette balise à la place de la balise de liste appropriée si le contenu que vous stylisez est bien une liste. Si vous modifiez l'apparence visuelle d'un élément pour le faire passer d'un élément de liste à un élément de liste, cela n'a aucune incidence sur 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 par les lecteurs d'écran ni par les appareils de commutation. Vous devez toujours utiliser le balisage sémantique et créer des listes avec <li> dans la mesure du possible.

Vérifier vos connaissances

Tester vos connaissances sur les listes

L'élément qui précède un élément de liste s'appelle

::bullet
::counter
::marker
::pencil

Il existe trois types de listes HTML :

<dl>
<list>
<ol>
<lo>
<li>
<ul>

Quels sont les deux styles de cette liste qui appliquent des styles à un ::marker ?

display
color
background-color
transition

Ressources