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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
L'élément qui précède un élément de liste est appelé
::marker
::pencil
::counter
::bullet
Les trois types de listes HTML sont
<dl>
<ul>
<lo>
<list>
<ol>
<li>
Quels styles de cette liste appliqueront des styles à une ::marker
?
color
background-color
display
transition