Découvrez des méthodes utiles et créatives pour styliser une liste.
Qu'est-ce qui vous vient à l'esprit lorsque vous pensez à une liste ? L'exemple le plus évident est une liste de courses : la plus simple de ces listes, une collection d'articles présentés dans un ordre différent. Mais nous utilisons les listes de toutes sortes de façons sur le Web. Une collection de concerts à venir dans une salle ? Probablement une liste. Un processus de réservation en plusieurs étapes ? Probablement une liste. Une galerie d'images ? Même cela pourrait être considéré comme une liste d'images avec légende.
Dans cet article, nous décrirons en détail les différents types de listes HTML disponibles sur le Web et dans quels cas les utiliser. Vous y trouverez également des attributs que vous ne connaissez peut-être pas. Nous verrons également des méthodes utiles et créatives pour leur appliquer un style en CSS.
Quand utiliser une liste ?
Vous devez utiliser un élément de liste HTML lorsque les éléments doivent être regroupés sémantiquement. Les technologies d'assistance (telles que les lecteurs d'écran) avertissent l'utilisateur qu'il existe une liste, ainsi que le nombre d'éléments. Si vous pensez, par exemple, à une grille de produits sur un site de vente, connaître ces informations serait très utile. Par conséquent, l'utilisation d'un élément de liste peut être un bon choix.
Répertorier les types
Pour le balisage, nous avons le choix entre trois éléments de liste différents:
- Liste à puces
- Liste numérotée
- Liste des descriptions
Le choix dépend du cas d'utilisation.
Liste à puces (ul)
L'élément de liste à puces (<ul>) est particulièrement utile lorsque les éléments de la liste ne correspondent à aucun ordre particulier. Par défaut, il s'affiche sous forme de liste à puces. Prenons l'exemple d'une liste de courses, pour laquelle l'ordre n'a pas d'importance.
Un exemple plus courant sur le Web est un menu de navigation. Lorsque vous créez un menu, il est recommandé d'encapsuler ul dans un élément nav et d'identifier le menu à l'aide d'un libellé afin de faciliter les technologies d'assistance. Nous devons également identifier la page actuelle dans le menu, ce que nous pouvons faire à l'aide de l'attribut aria-current:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
Cet article sur la structure des menus présente un certain nombre de recommandations visant à vous assurer que nos menus de navigation sont accessibles à tous.
Liste numérotée (ol)
Un élément de liste numérotée (<ol>) est le meilleur choix lorsque l'ordre des éléments est important, par exemple un processus en plusieurs étapes. Par défaut, les éléments de liste sont numérotés. Il peut s'agir, par exemple, d'un ensemble d'instructions, où les étapes doivent être effectuées dans l'ordre.
Les éléments <ol> et <ul> ne peuvent contenir que des éléments <li> en tant qu'enfants directs.
Liste de descriptions (dl)
Une liste de descriptions contient des termes (<dt> éléments) et des descriptions (<dd>). Chaque terme peut être accompagné de plusieurs descriptions. Les cas d'utilisation possibles peuvent inclure un glossaire des termes ou un menu de restaurant. Par défaut, les listes de descriptions ne sont affichées avec aucun repère, bien que les navigateurs aient tendance à mettre en retrait l'élément <dd>.
En HTML, il est autorisé de regrouper des termes et leurs descriptions associées à l'aide d'un <div>. Cela peut être utile à des fins de stylisation, comme nous le verrons plus tard.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Style de liste simple
L'une des utilisations les plus simples d'une liste est dans un bloc du corps du texte. Bien souvent, ces listes simples n'ont pas besoin d'un style élaboré, mais nous pouvons personnaliser les marqueurs d'une liste ordonnée ou non dans une certaine mesure, par exemple avec la couleur de la marque ou en utilisant une image personnalisée pour nos puces. Nous pouvons faire beaucoup de choses avec list-style et le pseudo-élément ::marker.
::repère
En plus de styliser nos marqueurs de liste, nous pouvons créer des puces cycliques. Ici, nous utilisons trois URL d'image différentes pour la valeur content du pseudo-élément ::marker, ce qui vient s'ajouter à l'écriture manuscrite de notre exemple de liste de courses (au lieu d'utiliser une seule image pour tous):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Compteurs personnalisés
Pour certaines listes numérotées, vous pouvez utiliser la valeur de compteur et y ajouter une autre valeur. Nous pouvons utiliser le compteur list-item comme valeur pour la propriété content de notre repère et ajouter tout autre contenu:
::marker {
content: counter(list-item) '🐈 ';
}
Nos compteurs incrémentent automatiquement d'une unité, mais nous pouvons leur permettre de l'incrémenter d'une valeur différente si nous le souhaitons, en définissant la propriété counter-increment sur l'élément de liste. Par exemple, les compteurs sont incrémentés de trois à chaque fois:
li {
counter-increment: list-item 3;
}
Il y a beaucoup plus de choses que nous pourrions explorer avec les compteurs. L'article Listes CSS, repères et compteurs explique en détail certaines de ces possibilités.
Limites du style ::marqueur
Parfois, nous pouvons avoir besoin de plus de contrôle sur la position et le style de nos repères. Il n'est pas possible de positionner le repère à l'aide d'un support flexible ou d'une grille, par exemple, ce qui peut parfois s'avérer un inconvénient si vous avez besoin d'un autre alignement. ::marker expose un nombre limité de propriétés CSS pour la mise en forme. Si notre conception nécessite autre chose qu'un style de base, il est préférable d'utiliser un autre pseudo-élément.
Appliquer un style à des listes qui ne ressemblent pas à des listes
Parfois, nous pouvons vouloir appliquer à nos listes un style totalement différent du style par défaut. C'est souvent le cas avec un menu de navigation, qui permet généralement de supprimer tous les repères et d'afficher notre liste horizontalement, à l'aide de Flexbox. Une pratique courante consiste à définir la propriété list-style sur none. Cela signifie que le pseudo-élément de repère ne sera plus accessible dans le DOM.
Repères personnalisés avec ::before
Avant l'apparition de ::marker, il était courant de styliser le pseudo-élément ::before pour créer des repères de liste personnalisés. Mais même maintenant, elle peut nous offrir plus de flexibilité, quand nous en avons besoin, pour des styles de liste visuellement complexes.
Comme pour ::marker, nous pouvons ajouter nos propres styles de puces personnalisés à l'aide de l'attribut content. Contrairement à ::marker, nous devons effectuer un positionnement manuel, car nous ne profitons pas des avantages automatiques offerts par list-style-position. Nous pouvons toutefois le positionner relativement facilement avec Flexbox, ce qui ouvre de nombreuses possibilités d'alignement. Par exemple, nous pourrions alterner la position du repère:
Si vous appliquez un style à une liste numérotée à l'aide de l'élément ::before, vous pouvez également utiliser des compteurs pour ajouter nos repères numériques.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
L'utilisation de ::before au lieu de ::marker nous permet d'accéder à l'intégralité des propriétés CSS pour le style personnalisé et d'autoriser les animations et les transitions, pour lesquelles la prise en charge est limitée pour ::marker.
Attributs de liste
Les éléments de listes numérotées acceptent des attributs facultatifs, ce qui peut nous aider dans de nombreux cas d'utilisation.
Listes inversées
Si nous avons une liste des 10 albums les plus écoutés de l'année passée, nous pourrions vouloir passer à un compte à rebours de 10 à 1. Pour ce faire, nous pourrions utiliser des compteurs personnalisés et les incrémenter négativement. Nous pourrions également utiliser simplement l'attribut reversed dans le code HTML. Je dirais qu'il est généralement logique d'utiliser l'attribut reversed plutôt que d'incrémenter négativement le compteur en CSS, sauf si les compteurs sont purement présentés. Si le chargement du code CSS échoue, le compte à rebours s'affichera quand même dans le code HTML. De plus, nous devons réfléchir à la façon dont un lecteur d'écran interpréterait la liste.
Regardez cette démonstration des 10 meilleurs albums de 2021. Si les compteurs étaient incrémentés uniquement avec le code CSS, la personne accédant à la page à l'aide d'un lecteur d'écran pourrait en conclure que les chiffres étaient comptabilisés à la hausse. Le chiffre 10 était donc en fait numéro un.
Vous pouvez voir dans la démonstration qu'en utilisant l'attribut reversed, la valeur des repères est déjà correcte, sans effort supplémentaire de notre part. En revanche, si nous créons des repères de liste personnalisés à l'aide du pseudo-élément ::before, nous devons ajuster nos compteurs. Il nous suffit de demander à notre compteur d'éléments de liste d'effectuer une incrémentation négative:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Dans Firefox, c'est suffisant, mais dans Chrome et Safari, le nombre de repères passe de 0 à -10. Pour résoudre ce problème, ajoutez l'attribut start à la liste.
Diviser les listes
L'attribut start nous permet de spécifier la valeur numérique à partir de laquelle la liste doit commencer. Cela peut être utile si vous souhaitez diviser une liste en groupes.
Continuons sur notre exemple des 10 meilleurs albums. Nous voulons peut-être faire un compte à rebours pour les 20 meilleurs albums, mais par groupes de 10. Entre les deux groupes se trouvent d'autres contenus de la page.
Nous devrons créer deux listes distinctes dans notre code HTML, mais comment pouvons-nous nous assurer que les compteurs seront corrects ? En l'état actuel de notre balisage, les deux listes afficheront un décompte de 10 à 1, ce qui n'est pas ce que nous souhaitons. Cependant, dans notre code HTML, nous pouvons spécifier une valeur d'attribut start. Si nous ajoutons une valeur start de 20 à notre première liste, les repères seront à nouveau mis à jour automatiquement.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Mise en page de liste à plusieurs colonnes
La mise en page à plusieurs colonnes se prête parfois bien à nos listes, comme vous pouvez le voir dans les démonstrations précédentes. En définissant une largeur de colonne, nous pouvons nous assurer que notre liste est automatiquement responsive, en se posant sur deux colonnes ou plus uniquement si l'espace est suffisant. Nous pouvons également définir un écart entre les colonnes et, pour plus de résultats, ajouter une règle de colonne stylisée (en utilisant un raccourci semblable à la propriété border):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
En utilisant des colonnes, nous pouvons parfois nous retrouver avec des ruptures disgracieuses dans nos éléments de liste, ce qui ne correspond pas toujours à l'effet souhaité.
Nous pouvons éviter ces pauses forcées en utilisant break-inside: avoid sur les éléments de notre liste:
li {
break-inside: avoid;
}
Propriétés personnalisées
Les propriétés CSS personnalisées offrent un large éventail de possibilités pour appliquer un style aux listes. Si nous connaissons l'index de l'élément de la liste, nous pouvons l'utiliser pour calculer les valeurs des propriétés. Malheureusement, à l'heure actuelle, il n'existe aucun moyen de déterminer l'index de l'élément (de manière utilisable et à n'importe quel moment) uniquement dans le CSS. Les compteurs nous permettent uniquement d'utiliser leur valeur dans la propriété content et n'autorisent pas les calculs.
Toutefois, nous pouvons définir l'index de l'élément dans l'attribut style de notre code HTML, ce qui facilite les calculs, surtout si nous utilisons un langage de création de modèles. Cet exemple montre comment définir ce paramètre à l'aide de Nunjucks:
<ol style="--length: items|length">
</ol>
Splitting.js est une bibliothèque qui exécute une fonction similaire côté client.
La valeur de propriété personnalisée nous permet d'afficher la progression dans une liste de différentes manières. Vous pouvez par exemple utiliser une barre de progression pour afficher une liste d'étapes. Dans cet exemple, nous utilisons un pseudo-élément avec un dégradé linéaire pour créer une barre pour chaque élément qui indique la distance où se trouve l'utilisateur dans la liste.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
Nous pouvons également ajuster la teinte à mesure que la liste progresse, à l'aide de la fonction de couleur hsl(). Nous pouvons calculer la valeur hue à l'aide de notre propriété personnalisée.
Style de la liste de descriptions
Comme indiqué précédemment, nous pouvons choisir d'encapsuler les termes et leurs définitions dans une div d'une dl, afin de nous offrir davantage d'options de style. Par exemple, nous pouvons afficher notre liste sous forme de grille. Si vous définissez display: grid dans la liste sans wrapper div autour de chaque groupe, nos termes et descriptions seront placés dans des cellules de grille différentes. Cela est parfois utile, comme dans l'exemple suivant, montrant un menu de tartes avec leurs descriptions.
Nous pouvons définir une grille sur la liste elle-même et faire en sorte que les termes et les descriptions s'alignent toujours dans les colonnes, la largeur de colonne étant déterminée par le terme le plus long.
En revanche, si nous souhaitons regrouper distinctement des termes avec leur description sous forme de fiche, un wrapper <div> est très utile.
Ressources
- Listes : présentation des listes et ::Marker
- Repères personnalisés à l'aide de ::Marker
- Listes CSS avec compteurs