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
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.
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.
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é
Les trois types de listes HTML sont
<dl>
<lo>
<ol>
<li>
<ul>
<list>
Quels sont les deux styles de cette liste qui appliquent des styles à un repère ::?
transition
background-color
color
display