De nombreux types de contenus sont mieux représentés sous forme de liste HTML. Pour le contenu de liste ordonnée, comme les étapes d'une recette ou les notes de bas de page d'un article, le marqueur contient souvent des informations. CSS propose plusieurs façons de contrôler les compteurs dans une liste.
Lister les styles
Il existe une large gamme de types de styles de liste prédéfinis qui prennent en charge les chiffres, les lettres de l'alphabet, les chiffres romains et de nombreux systèmes de numérotation internationaux.
En plus des styles pris en charge par les navigateurs, le W3C a publié Ready-made Counter Styles, qui propose 181 styles supplémentaires dans 45 systèmes d'écriture.
Si ces options ne répondent pas à vos besoins, vous pouvez également définir un @counter-style personnalisé. Cela vous permet de spécifier des symboles personnalisés, un préfixe et un suffixe, et plus encore.
Par défaut, le marqueur d'élément outside la liste, est positionné devant la liste et aligné à droite. Vous pouvez également positionner le repère de l'élément à l'intérieur de la liste, avec list-style-position: inside.
Compteurs
Alors que les styles de liste contrôlent l'affichage des marqueurs d'éléments de liste, les compteurs vous permettent de contrôler les valeurs à afficher. Pour les éléments de liste <li>, le navigateur crée un compteur appelé list-item, qui est incrémenté de 1 pour chaque élément de liste rencontré.
Les compteurs CSS comptabilisent le nombre de fois qu'un élément dont la valeur counter-increment correspondante est définie est affiché.
Pour créer un compteur, utilisez counter-reset avec un nom de compteur et, éventuellement, une valeur initiale. Vous définissez souvent cette propriété sur un élément parent qui contient tous les éléments à comptabiliser.
Ajoutez ensuite une propriété counter-increment à chaque élément que vous souhaitez comptabiliser.
Enfin, affichez la valeur du compteur à l'aide de la fonction counter().
Dans cet exemple, nous souhaitons afficher le nombre courant de notes de bas de page en tant que texte du lien pour chaque note de bas de page. Comme nous voulons un seul compteur pour l'ensemble du document, nous définissons counter-reset: note sur le corps et l'incrémentons sur chaque lien de note de bas de page.
Vous pouvez également avoir plusieurs compteurs comptant différents éléments. Dans l'exemple des notes de bas de page, que se passerait-il si vous souhaitiez afficher l'index de la section et du paragraphe dans lesquels se trouve la note de bas de page ?
Le nombre de sections peut être créé dans le corps à l'aide de counter-reset, puis incrémenté sur chaque élément <h2>. Nous voulons que le nombre de paragraphes soit réinitialisé pour chaque section. Nous allons donc utiliser counter-reset sur les éléments <h2> et incrémenter les éléments <p>.
Enfin, nous combinons les valeurs du compteur dans la propriété content.
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
Compteurs imbriqués
Que se passe-t-il lorsque vous imbriquez une liste dans une autre ? Le compteur list-item est initialisé pour chaque élément <ul> ou <ol>, et l'utilisation de counter() ne renvoie que le nombre du décompte le plus interne. Si vous souhaitez afficher le nombre de chacun des compteurs imbriqués, utilisez la fonction counters(), qui prend un nom de compteur et un séparateur.
li::marker {
content: counters(list-item, ".")
}
Inverser les compteurs
Par défaut, les compteurs (y compris le compteur list-item implicite pour les éléments <ol>) commencent à 0 et augmentent d'une unité pour chaque élément. Le premier élément est donc comptabilisé comme 1. Et si vous souhaitez compter à rebours jusqu'à 1 ?
Pour ce faire, ajoutez l'attribut reversed à <ol>. Si vous utilisez le style de liste standard, les marqueurs fonctionneront comme prévu. Toutefois, si vous utilisez un compteur personnalisé, vous devrez définir counter-increment sur une valeur négative et calculer manuellement la valeur de départ du compteur.