We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

 

Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.

Prérequis : Connaissances de base informatiques, bases HTML (étudiées dans Introduction à HTML), bases CSS (étudiées dans Introduction à CSS), la mise en forme du texte.
Objectif : Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.

Un exemple de liste simple

Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes désordonnées, ordonnées et leurs descriptions — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est disponible sur Github (voyez aussi le code source).

Le code HTML de notre exemple de liste ressemble à ceci :

<h2>Shopping (unordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ul>
  <li>Humous</li>
  <li>Pitta</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ol>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Humous</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pitta</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant les outils de développement du navigateur, vous remarquerez quelques défauts de style :

  • Les éléments <ul> et <ol> ont des margin (marges) haut et bas de 16 px (1 em)  et un padding-left (remplissage à gauche) de 40 px (2.5 em.)
  • Les éléments de la liste (<li>) n'ont pas de paramètres par défaut pour l'espacement.
  • L'élément <dl> a des margin (marges) haut et bas de16 px (1 em), mais pas de définition du remplissage.
  • Les éléments <dd> ont une margin-left (marge gauche) de 40 px (2.5 em.)
  • Les éléments <p> que nous avons inclus pour référence  ont des margin (marges) haut et bas de 16 px (1 em), les mêmes que les différents types de listes.

Gestion de l'espacement des listes

Lorsque vous donnez un style aux listes, vous devez les ajuster de manière à conserver le même espacement vertical qu'aux éléments environnants (tels que les paragraphes et les images, principe parfois appelé "rythmes verticaux") et les mêmes espaces horizontaux. (vous pouvez voir l'exemple de style terminé sur Github et trouver le code source aussi.)

Le CSS utilisé pour le style et l'espacement du texte est le suivant :

/* Style général */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Styles de listes de description */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}
  • La première règle définit une police de caractères pour l'ensemble du site et une taille de base de 10 px. Elles sont héritées par tous les éléments de la page.
  • Les règles 2 et 3 définissent des tailles relatives de la police pour les en-têtes, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent.
  • La règle 4 définit la même line-height (hauteur de ligne) pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent.
  • Les règles 5 et 6 s'appliquent à la liste de description - nous définissons la même line-height (hauteur de ligne) pour les termes et les descriptions de la liste de description que nous avons utilisés pour les paragraphes et les éléments de la liste. Encore une fois, la cohérence est bonne ! Nous définissons également les termes de description avec une police en gras, de sorte qu'ils se distinguent visuellement plus facilement.

Styles spécifiques à une liste

Maintenant que nous avons examiné l'espacement général des listes, explorons certaines propriétés spécifiques à la liste. Il y a trois propriétés que vous devez connaître pour commencer, qui peuvent être définies pour les éléments <ul> et <ol> :

  • list-style-typedéfinit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée, ou des nombres, des lettres ou des chiffres romains pour une liste ordonnée.
  • list-style-positiondéfinit si les puces apparaissent à l'intérieur des éléments de la liste ou en dehors de ceux-ci, avant le début de chaque élément.
  • list-style-image : vous permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond.

Styles de puces

Comme mentionné ci-dessus, la propriété list-style-type vous permet de définir quel type de puce utiliser. Dans notre exemple,  nous avons défini une liste ordonnée utilisant les chiffres romains avec :

ol {
  list-style-type: upper-roman;
}

Cela nous donne l'apparence suivante :

an ordered list with the bullet points set to appear outside the list item text.

Vous pouvez trouver beaucoup plus d'options en consultant la page de référence list-style-type.

Position des puces

La propriété list-style-position définit si les puces apparaissent dans la liste ou à l'extérieur de celle-ci avant chacun de ses éléments. Par défaut, la valeur est outside (extérieur), et les puces apparaîtront comme ci-dessus.

Si vous choisissez la valeur inside, les puces seront posées dans les lignes :

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

an ordered list with the bullet points set to appear inside the list item text.

Utilisation d'une puce image personnalisée

La propriété list-style-image vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :

ul {
  list-style-image: url(star.svg);
}

Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés background, dont vous apprendrez beaucoup plus dans le module Styliser les boîtes. Pour maintenant, voici un avant-goût !

Dans notre exemple achevé, nous avons appliqué un style de la liste désordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Ici nous avons fait ce qui suit :

  • défini le padding-left (remplissage gauche) de l'élément <ul>, abaissé de 40 px par défaut à 20 px, puis définit le même niveau pour les éléments de la liste. Cela signifie que globalement les éléments de la liste sont toujours alignés avec les éléments de la liste de commandes et les descriptions de la liste de description, et les éléments de la liste ont un certain remplissage pour masquer les images d'arrière-plan. Si nous ne le faisions pas, les images d'arrière-plan et le texte seraient superposés, ce qui aurait l'air désordonné.
  • défini le list-style-type à none (aucun), ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de background pour gérer les puces.
  • Inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes :
    • background-imagecela fait référence au chemin d'accès du fichier image que vous souhaitez utiliser comme puce.
    • background-positionceci définit où l'image apparaîtra dans l'arrière-plan de l'élément sélectionné - dans ce cas, nous disons 0 0 , ce qui signifie que la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste.
    • background-size : Cela définit la taille de l'image d'arrière-plan. Nous voulons idéalement que les puces soient de la même taille que les éléments de la liste (ou très légèrement plus petites ou plus grandes). Nous utilisons une taille de 1.6 rem (16px), ce qui correspond très bien au remplissage de 20 px dans lequel est située la puce - 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien.
    • background-repeat : Par défaut, les images d'arrière-plan se répètent jusqu'à ce qu'elles remplissent l'espace d'arrière-plan disponible. Nous voulons qu'une seule copie de l'image soit insérée dans chaque cas, donc nous avons choisi la valeur no-repeat (pas de répétition).

Ceci nous donne le résultat suivant :

an unordered list with the bullet points set as little star images

Raccourci de style de liste

Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété raccourcie list-style. Par exemple, le CSS suivant :

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

Peut être remplacé par cela :

ul {
  list-style: square url(example.png) inside;
}

Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en utiliser une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés qui ne sont pas incluses sont disc , none et outside ). Si un type et une image sont spécifiés, le type est utilisé comme solution de repli dans le cas où l'image ne peut être chargée pour une raison quelconque.

Contrôle du comptage des listes

Parfois, vous pouvez vouloir compter différemment sur une liste ordonnée - par exemple à partir d'un nombre autre que 1, ou en comptant à rebours, ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.

start (début)

L'attribut start vous permet de commencer le comptage de la liste à partir d'un nombre différent de 1. L'exemple suivant :

<ol start="4">
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

vous donne cette sortie :

reversed (inversé)

L'attribut reversed commencera le décompte de liste du bas vers le haut. L'exemple suivant :

<ol start="4" reversed>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

vous donne cette sortie :

value (valeur)

L'attribut value vous permet de définir vos éléments de liste à des valeurs numériques spécifiques . L'exemple suivant :

<ol>
  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

vous donne cette sortie :

Note : Même si vous utilisez un caractère qui n'est pas numérique dans type-style-list, vous devez toujours utiliser les valeurs numériques équivalentes dans l'attribut value.

Apprentissage actif : Définir un style à des listes imbriquées

Dans cette session d'apprentissage actif, nous souhaitons que vous utilisiez ce que vous avez appris ci-dessus et que vous essayiez de donner un style à des listes imbriquées. Nous vous avons fourni le code HTML et nous souhaitons que vous :

  1. donniez une puce carrée aux éléments de la liste non ordonnée.
  2. donniez aux éléments des listes, ordonnées ou non, une hauteur de ligne représentant 1.5 fois la taille de la police de caractères.
  3. donniez à la liste ordonnée une puce alphabétique de taille inférieure.
  4. n'hésitiez pas à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement, ou tout ce que vous pouvez trouver.

Si vous faites une erreur, vous pouvez toujours réinitialiser en utilisant le bouton Reset . Si vous êtes vraiment bloqué, appuyez sur le bouton Show solution (Afficher la solution) pour voir une réponse potentielle.

Voir aussi

Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :

Résumé

Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style de liens.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, BOBY2017
Dernière mise à jour par : loella16,