Listes

Podcast CSS – 030: Listes

Imaginez que vous avez plusieurs articles que vous prévoyez d'acheter lors de votre prochaine é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 commençait 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 comportent tous une display: list-item, ce qui explique pourquoi le navigateur affiche une ::marker par défaut.

li {
  display: list-item;
}

Il existe deux autres types de listes.

Les listes ordonnées peuvent être créées avec <ol>, auquel cas l'élément de liste affiche un nombre en tant que ::marker.

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

De plus, 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

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Maintenant que vous savez comment créer une liste, vous pouvez leur 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 sous forme de 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 dans 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 de l'élément de liste, tandis que inside déplace le premier élément dans le contenu.

Liste avec à la fois à l&#39;extérieur et à l&#39;intérieur du signe ::Marker qui indique que l&#39;extérieur (valeur par défaut) n&#39;est pas dans l&#39;élément de liste mais qu&#39;il se trouve 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. Cela vous permet de définir une image, comme url ou none, pour transformer vos puces en image, SVG ou GIF. Vous pouvez également utiliser n'importe quel type de support 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 à list-style-type, ce qui permet de remplacer les puces par des mots clés de style connus, des chaînes personnalisées, des emoji, etc. Pour afficher tous les types de styles de liste possibles, cliquez ici.

list-style raccourci

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 propriétés list-style dans n'importe quel ordre. Si list-style-type et list-style-image sont tous les 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 qui permet de masquer les styles par défaut. Les styles par défaut proviennent du navigateur, et les feuilles de style sont souvent réinitialisées et suppriment des styles de liste tels que les marges intérieures 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 concentraient sur l'application d'un style à une liste entière et à ses éléments, 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.

Liste de trois éléments qui montre que chacun des puces est des pseudo-éléments ::Marker

Si vous inspectez la liste dans les outils de développement, vous pouvez voir un élément ::marker pour chacun de ses éléments, même si vous n'en déclarez aucun en HTML. Si vous inspectez plus en détail ::marker, vous verrez son style par défaut dans le 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, chaque élément reçoit un marqueur, bien qu'il n'y ait pas de puce ou 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é pour le cibler. En savoir plus sur la structure de la puce CSS ::marker dispose d'une compatibilité limitée dans Safari.

Zone de repère

Dans le modèle de mise en page CSS, les repères des éléments de liste sont représentés par une zone de repère associée à chaque élément de la liste. La zone de 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 à 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, rendez-vous sur 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ément de liste.

Pour ce faire, ajoutez la propriété display: list-item. Par exemple, utiliser display: list-item permet de remplacer un titre par une puce erronée avec ::marker. L'exemple suivant présente un titre utilisant display: list-item à des fins de style, avec une liste utilisant le balisage approprié.

Bien que vous puissiez transformer n'importe quel élément en vue d'élément de liste avec display, vous ne devez pas l'utiliser à la place du balisage de liste approprié, si le contenu que vous stylisez est réellement une liste. Remplacer l'apparence visuelle d'un élément par un élément de liste ne modifie pas la façon dont les services d'accessibilité lisent et reconnaissent l'élément. Il ne sera donc pas lu sous la forme d'un élément de liste pour les lecteurs d'écran ou les appareils de commutation. 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

L'élément qui précède un élément de liste est appelé

::puce
Réessayez.
::crayon
Réessayez.
::repère
Bonne réponse !
::compteur
Réessayez.

Les trois types de listes HTML sont

<dl>
Bonne réponse !
<lo>
Réessayez.
<ol>
Bonne réponse !
<li>
Réessayez.
<ul>
Bonne réponse !
<list>
Réessayez.

Quels sont les deux styles de cette liste qui appliquent des styles à un repère ::?

transition
Bonne réponse !
background-color
Réessayez.
color
Bonne réponse !
display
Réessayez.

Ressources