Styles de la liste de créations

Découvrez des façons utiles et créatives de styliser une liste.

Michelle Barker
Michelle Barker

Qu'est-ce qui vous vient à l'esprit lorsque vous pensez à une liste ? L'exemple le plus évident est une liste de courses, la liste la plus simple, qui est un ensemble d'articles dans un ordre quelconque. Mais nous utilisons les listes de toutes sortes de manières sur le Web. Une sélection de concerts à venir dans une salle de concert ? Très probablement une liste. Un processus de réservation en plusieurs étapes ? Il s'agit probablement d'une liste. Une galerie d'images ? Même cela pourrait être considéré comme une liste d'images avec légendes.

Dans cet article, nous allons examiner les différents types de listes HTML disponibles sur le Web et les cas d'utilisation, y compris certains attributs que vous ne connaissez peut-être pas. Nous verrons également comment leur appliquer un style de manière utile et créative avec CSS.

Un élément de liste HTML doit être utilisé lorsque les éléments doivent être regroupés sémantiquement. Les technologies d'assistance (comme les lecteurs d'écran) indiquent à l'utilisateur qu'il y a une liste et le nombre d'éléments. Par exemple, si vous pensez à une grille de produits sur un site d'achat, ces informations peuvent être très utiles. Il peut donc être judicieux d'utiliser un élément de liste.

Répertorier les types

En ce qui concerne le balisage, vous avez le choix entre trois éléments de liste différents:

  • Liste à puces
  • Liste numérotée
  • Liste de descriptions

Le choix dépend du cas d'utilisation.

Liste non ordonnée (ul)

L'élément de liste non ordonnée (<ul>) est particulièrement utile lorsque les éléments de la liste ne correspondent à aucun ordre particulier. Par défaut, il s'agit d'une liste à puces. Par exemple, une liste de courses, où l'ordre n'a pas d'importance.

Liste de courses comprenant des articles tels que du pain, du lait et des pommes.

Un exemple plus courant sur le Web est un menu de navigation. Lorsque vous créez un menu, il est recommandé d'encapsuler le ul dans un élément nav et d'identifier le menu avec un libellé pour aider 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 pour que les menus de navigation soient accessibles à tous.

Liste ordonnée (ol)

Un élément de liste ordonnée (<ol>) est le meilleur choix lorsque l'ordre des éléments est important, par exemple dans un processus en plusieurs étapes. Par défaut, les éléments de liste sont numérotés. Il peut s'agir d'un ensemble d'instructions, où les étapes doivent être effectuées dans l'ordre.

Liste détaillant les étapes requises pour préparer du thé avec du lait.

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 (éléments <dt>) et des descriptions (<dd>). Chaque terme peut être accompagné de plusieurs descriptions. Il peut s'agir d'un glossaire de termes ou d'un menu de restaurant, par exemple. Par défaut, les listes de description ne sont pas affichées avec des repères, bien que les navigateurs aient tendance à indenter l'élément <dd>.

En HTML, il est autorisé de regrouper des termes avec les descriptions qui les accompagnent à l'aide d'un <div>. Cela peut être utile pour le style, 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 de corps de texte. Souvent, ces listes simples n'ont pas besoin d'un style élaboré, mais vous pouvez personnaliser les repères d'une liste ordonnée ou non ordonnée dans une certaine mesure, par exemple avec une couleur de marque ou en utilisant une image personnalisée pour les puces. Nous pouvons faire beaucoup de choses avec list-style et le pseudo-élément ::marker.

::marker

En plus de donner un style de base à nos repères 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 renforce l'impression d'é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 ordonnées, nous pouvons utiliser la valeur du compteur, mais 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 augmentent automatiquement d'une unité, mais nous pouvons leur permettre d'augmenter d'une autre valeur si nous le souhaitons, en définissant la propriété counter-increment sur l'élément de liste. Par exemple, cela incrémentera nos compteurs de trois à chaque fois:

li {  
   
counter-increment: list-item 3;  
}  

Il y a beaucoup d'autres choses que nous pourrions explorer avec les compteurs. L'article Listes, repères et compteurs CSS explique certaines des possibilités plus en détail.

Limites du style ::marker

Il peut arriver que vous souhaitiez davantage de contrôle sur la position et le style de vos repères. Il n'est pas possible de positionner le repère à l'aide de flexbox ou de grille, par exemple, ce qui peut parfois être un inconvénient si vous avez besoin d'un autre alignement. ::marker expose un nombre limité de propriétés CSS pour le style. Si notre conception nécessite autre chose qu'un style de base, il est peut-être préférable d'utiliser un autre pseudo-élément.

Mettre en forme des listes qui ne ressemblent pas à des listes

Il peut arriver que vous souhaitiez styliser vos listes de manière totalement différente du style par défaut. C'est souvent le cas avec un menu de navigation, par exemple, où nous souhaitons généralement supprimer tous les repères et afficher notre liste horizontalement, à l'aide de flexbox. Une pratique courante consiste à définir la propriété list-style sur none. Le pseudo-élément du repère ne sera donc plus accessible dans le DOM.

Repères personnalisés avec ::before

Avant l'arrivée 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, il peut nous offrir plus de flexibilité, lorsque nous en avons besoin, pour le style des listes 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 bénéficions pas des avantages automatiques offerts par list-style-position. Mais nous pouvons le positionner relativement facilement avec Flexbox, et cela ouvre un plus grand nombre de possibilités d'alignement. Par exemple, nous pouvons alterner la position du repère:

Si nous stylisons une liste ordonnée à l'aide de l'élément ::before, nous pouvons é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 entièrement aux propriétés CSS pour le style personnalisé, ainsi que d'autoriser les animations et les transitions, pour lesquelles la prise en charge est limitée avec ::marker.

Attributs de la liste

Les éléments de listes ordonnées acceptent certains attributs facultatifs, qui peuvent nous aider dans divers cas d'utilisation.

Listes inversées

Si nous disposons d'une liste des 10 meilleurs albums de l'année précédente, nous pouvons compter à rebours de 10 à 1. Nous pourrions utiliser des compteurs personnalisés pour cela et les incrémenter de manière négative. Nous pouvons également utiliser simplement l'attribut reversed dans le code HTML. Je dirais qu'il est généralement sémantiquement logique d'utiliser l'attribut reversed plutôt que d'incrémenter négativement le compteur en CSS, sauf si les compteurs sont purement de présentation. Si le CSS ne s'est pas chargé, le décompte des chiffres s'affiche toujours correctement dans le code HTML. Nous devons également tenir compte de la façon dont un lecteur d'écran interprétera la liste.

Regardez cette démonstration des 10 meilleurs albums de 2021. Si les compteurs ont été incrémentés uniquement avec CSS, une personne accédant à la page à l'aide d'un lecteur d'écran pourrait conclure que les nombres augmentent, et que le nombre 10 est en fait le nombre 1.

Dans la démonstration, vous pouvez voir qu'en utilisant l'attribut reversed, nos repères ont déjà la valeur correcte, sans effort supplémentaire de notre part. Toutefois, 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 d'indiquer à notre compteur d'éléments de liste d'augmenter de manière négative:

li::before {  
 
counter-increment: list-item -1;  
 
content: counter(list-item);  
}  

Cela suffit dans Firefox, mais dans Chrome et Safari, les repères décomptent de zéro à -10. Pour résoudre ce problème, ajoutez l'attribut start à la liste.

Scinder des listes

L'attribut start nous permet de spécifier la valeur numérique à partir de laquelle la liste doit commencer. Cela peut être utile, par exemple, si vous souhaitez diviser une liste en groupes.

Reprenons notre exemple des 10 meilleurs albums. Nous souhaitons peut-être afficher les 20 premiers albums, mais par groupes de 10. Entre les deux groupes, il y a d'autres contenus de page.

Liste sous forme de maquette fonctionnelle en colonnes avec un élément couvrant la moitié des colonnes.

Nous allons devoir créer deux listes distinctes dans notre code HTML, mais comment nous assurer que les compteurs seront corrects ? Dans notre balisage actuel, les deux listes décomptent de 10 à 1, ce qui n'est pas ce que nous souhaitons. Toutefois, 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 la liste multicolonne

La mise en page multicolonne peut parfois être adaptée à 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 et qu'elle s'étend sur au moins deux colonnes uniquement lorsqu'il y a suffisamment d'espace. Nous pouvons également définir un espace entre les colonnes et, pour plus de style, ajouter une règle de colonne stylisée (à l'aide d'un raccourci semblable à la propriété border):

ol {  
   
columns: 25rem;  
   
column-gap: 7rem;  
   
column-rule: 4px dotted turquoise;  
}  

L'utilisation de colonnes peut parfois entraîner des coupures disgracieuses dans les éléments de liste, ce qui n'est pas toujours l'effet souhaité.

Démonstration de la répartition du contenu entre deux colonnes.

Nous pouvons éviter ces coupures forcées en utilisant break-inside: avoid sur nos éléments de liste:

li {  
   
break-inside: avoid;  
}  

Propriétés personnalisées

Les propriétés CSS personnalisées offrent une large gamme de possibilités pour styliser les listes. Si nous connaissons l'index de l'élément de liste, nous pouvons l'utiliser pour calculer les valeurs de propriété. Malheureusement, il n'existe actuellement aucun moyen de déterminer l'index de l'élément (de manière utilisable, en tout cas) en CSS seul. Les compteurs ne nous permettent d'utiliser leur valeur que dans la propriété content et ne permettent pas de calculer.

Cependant, nous pouvons définir l'index de l'élément dans l'attribut style dans notre code HTML, ce qui peut rendre les calculs plus faciles, en particulier si nous utilisons un langage de création de modèles. Cet exemple montre comment procéder avec Nunjucks:

<ol style="--length: items|length">  
 
</ol>  

Splitting.js est une bibliothèque qui remplit une fonction similaire côté client.

Grâce à la valeur de la propriété personnalisée, nous pouvons afficher la progression dans une liste de différentes manières. Vous pouvez par exemple utiliser une barre de progression pour 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 à quel point l'utilisateur a avancé 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 au fur et à mesure de la progression de la liste à 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 un div dans un dl pour disposer de plus d'options de style. Par exemple, nous pouvons vouloir afficher notre liste sous forme de grille. Définir display: grid sur la liste sans div autour de chaque groupe signifie que nos termes et descriptions sont placés dans différentes cellules de grille. Cela peut être utile, comme dans l'exemple suivant, qui montre un menu de tartes avec leur description.

Nous pouvons définir une grille sur la liste elle-même et nous assurer que les termes et les descriptions s'alignent toujours dans des colonnes, dont la largeur est déterminée par le terme le plus long.

En revanche, si nous souhaitons regrouper distinctement les termes avec leurs descriptions sous forme de carte, un wrapper <div> est très utile.

Ressources