Styles de la liste de créations

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

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 plus simple des listes, une collection d'articles dans un ordre particulier. Mais nous utilisons les listes de toutes sortes de manières sur le Web. Des concerts à venir dans une salle ? 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.

Quand utiliser une liste

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) informent l'utilisateur de la présence d'une liste et du 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 à puces (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.

Un exemple plus courant sur le Web est le 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.

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. Les cas d'utilisation possibles comprennent un glossaire des termes ou un menu de restaurant. 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;  
}  

Les compteurs peuvent être plus détaillés. 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 contrôler davantage 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 voulons généralement supprimer tous les repères, et où nous pouvons 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

Le style du pseudo-élément ::before était courant pour créer des repères de liste personnalisés avant l'arrivée de ::marker. 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 il est assez facile de le positionner avec Flexbox, ce qui 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, dont la prise en charge est limitée pour ::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 avons une liste des 10 meilleurs albums de l'année passée, nous pourrions vouloir effectuer un compte à rebours de 10 à 1. Pour cela, nous pourrions utiliser des compteurs personnalisés et les incrémenter négativement. Nous pouvons également simplement utiliser 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. De plus, nous devons examiner comment un lecteur d'écran interpréterait la liste.

Regardez cette démonstration des 10 meilleurs albums de 2021. Si les compteurs sont incrémentés uniquement avec CSS, un utilisateur accédant à la page à l'aide d'un lecteur d'écran peut en conclure que les nombres sont comptés à la hausse, de sorte que le chiffre 10 était en fait le numéro un.

Comme vous pouvez le voir dans la démonstration, si vous utilisez l'attribut reversed, la valeur de nos repères est déjà 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);  
}  

C'est suffisant dans Firefox, mais dans Chrome et Safari, les repères feront l'objet d'un compte à rebours 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.

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é.

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 que leur valeur dans la propriété content et n'autorisent pas les calculs.

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.

La valeur de la 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 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 leurs descriptions.

Nous pouvons définir une grille sur la liste elle-même et nous assurer que les termes et les descriptions seront toujours alignés dans des colonnes, la largeur de colonne étant 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

• Listes : présentation des listes et de ::marker
• Repères personnalisés à l'aide de ::marker
• Listes CSS avec compteurs