Listes, marqueurs et compteurs CSS

Les listes en CSS ont des propriétés particulières qui nous donnent le style de liste standard que nous attendons. Une liste non ordonnée gagne une puce de liste, du type disque et les listes ordonnées sont numérotées. Mon intérêt pour l'exploration des listes plus en détail est issu d'un travail que j'ai réalisé pour documenter le pseudo-élément :: marker pour MDN. Ce pseudo-élément est livré dans Firefox 68 et est publié aujourd'hui . Avec le pseudo-élément :: marker à notre disposition, nous pouvons commencer à faire des choses intéressantes avec des listes, et dans cet article, je vais vous expliquer davantage.

Deconstructing A List

Nous n’avons pas beaucoup réfléchi aux listes, même si nous les utilisons fréquemment dans notre balisage. Beaucoup de choses peuvent être logiquement marquées comme une liste. Bien que des instructions pas à pas ou des éléments classés puissent naturellement être décrits par une liste ordonnée

de nombreux éléments d’une conception peuvent être décrits à l’aide d’une liste non ordonnée
. Une utilisation très courante de l'élément, par exemple, est de baliser la navigation, car il s'agit d'une liste de destinations sur le site. Pour notre exploration, commençons par découvrir exactement ce qu’est une liste en CSS.

Comme pour beaucoup d’autres choses en CSS, les valeurs initiales sont appliquées aux listes. Ces valeurs les font ressembler à une liste. Ces valeurs spéciales commencent par l'information qu'un élément de la liste a la propriété d'affichage avec une valeur de l'élément de liste . Cela crée une zone de niveau bloc, avec une zone de marqueur supplémentaire. La boîte de marqueur est l'endroit où la puce ou le numéro de liste est ajouté.

Les listes ont été définies à un stade précoce dans CSS, et une grande partie de la définition des listes telle que nous les utilisons aujourd'hui provient de CSS2. La spécification CSS2 décrit un élément de liste comme suit:

«Un élément avec display: list-item génère une zone de bloc principale pour le contenu de l'élément et, en fonction des valeurs de style liste et
list-style-image éventuellement aussi une boîte de marqueur indiquant visuellement que l'élément est un élément de la liste. "

La zone de bloc principale est la zone principale de l'élément. et contient tous les enfants puisqu'un élément de liste peut contenir d'autres balises. La boîte de marqueur est ensuite placée par rapport à cette boîte principale. La spécification poursuit en détaillant le fait que toute couleur d'arrière-plan sera uniquement derrière cette zone principale, et non le marqueur. Le marqueur peut également être défini sur l'une des valeurs prédéfinies suivantes:

• disc
• circle
• square
• décimal
• décimal [0909012] lower-roman
• ] haut-romain
• bas-grec
• bas-latin
• haut-latin
• arménien
• géorgien
• bas-alpha
• haut-alpha
• aucune
• héritage

La ​​spécification d'affichage de niveau 3 définit display: élément de liste ainsi que les autres valeurs possibles pour la propriété display . Il renvoie à CSS 2.1 – de même que de nombreuses propriétés et valeurs CSS issues de CSS2 – mais décrit le mot clé de l'élément de liste comme suit: «L'élément génère un :: marker . pseudo-élément ”.

La ​​spécification de niveau 3 introduit également la possibilité de créer un élément de liste en ligne avec la syntaxe à deux valeurs utilisée . Affichage: élément de liste en ligne . Ceci n'est pas encore implémenté par les navigateurs.

Création de zones de marqueur sur des éléments non-listés

Comme pour les autres valeurs de display il est parfaitement correct de donner à tout élément HTML un type d'affichage de . ] liste-item (si vous souhaitez générer un pseudo-élément :: marker sur cet item). Cela ne fera pas que l'élément devienne un élément de liste sémantiquement, mais qu'il s'affichera uniquement sous forme d'élément de liste et pourra donc avoir un :: marker . Lorsque nous aborderons le pseudo-élément :: marker ci-dessous, vous découvrirez des cas où l'affichage d'autres éléments : list-item peut être utile.

Les listes CSS de niveau 3 Spécification: :: marker et des compteurs

La spécification display élargit et clarifie la définition des listes que nous trouvons dans CSS2. Cependant, il existe également une spécification qui définit le comportement de liste dans détail: la spécification de listes CSS de niveau 3 . Comme le comportement de base des éléments de liste est défini dans display cette spécification détaille la boîte de marqueur générée lorsque quelque chose a display: list-item ainsi que les compteurs utilisés par défaut. créer une liste ordonnée. Certaines fonctionnalités potentiellement utiles sont accessibles via ces fonctionnalités.

Le pseudo-élément :: marker

Le pseudo-élément :: marker vous permet de cibler le marqueur de liste. – séparément du contenu de l'élément de liste. Cela n’était pas possible dans les versions précédentes de CSS. Par conséquent, si vous changiez la couleur ou la taille de la police de caractères ul ou li cela modifierait également la couleur et la taille de police des marqueurs. . Pour faire quelque chose d'aussi simple en apparence que d'avoir des puces de liste de couleurs différentes de celles du texte, impliquerait de placer le contenu de l'élément de liste dans une plage (ou d'utiliser une image pour le marqueur).

 ul {
  couleur: # 00b7a8;
}

ul span {
  couleur # 333;
}

Avec le pseudo-élément :: marker la chose la plus simple à essayer est d'essayer de remplacer la couleur du texte par une autre puce, ce qui signifie qu'au lieu du code de l'exemple ci-dessus, vous pouvez utiliser: 19659036] ul {
    couleur: # 333;
}

ul :: marker {
    couleur: # 00b7a8;
}

Vous pouvez également utiliser une taille différente et une famille de polices pour la numérotation sur une liste ordonnée.

 ol :: marker {
  taille de police: 200%;
  couleur: # 00b7a8;
  famille de fontes: "Comic Sans MS", cursive, sans-serif;
}

Vous pouvez voir tous ces éléments dans un navigateur prenant en charge mon exemple CodePen:

Vous pouvez utiliser le pseudo-élément :: marker sur non -liste des articles. Dans le code ci-dessous, j'ai défini l'en-tête sur : list-item . Cela lui donne une balle et donc une case :: marker à cibler.

J'ai changé la balle pour utiliser un emoji:

 h1 {.
  display: liste-item;
}

h1 :: marker {
  contenu: "";
}

Dans l’exemple ci-dessus, j’ai utilisé le traitement généré. contenu dans les règles pour le marqueur. Seul un petit sous-ensemble de propriétés CSS est disponible pour une utilisation sur :: marker . Celles-ci incluent les propriétés de police et la couleur, mais elles incluent également la propriété content pour inclure le contenu généré.

L'ajout de contenu en tant que propriété autorisée pour : Le marqueur est récent, mais il est inclus dans l'implémentation de Firefox. L'inclusion signifie que vous pouvez faire des choses comme inclure une chaîne de texte dans un :: marker . Il offre également des possibilités supplémentaires de formatage des marqueurs lorsque vous combinez l'utilisation de compteurs avec :: marker .

Prise en charge et repli du navigateur

Pour les navigateurs qui ne prennent pas en charge le :: marker pseudo-élément, le repli est le marqueur régulier qui aurait été affiché de toute façon. Malheureusement, nous ne pouvons actuellement pas utiliser les requêtes de fonction pour détecter la prise en charge de sélecteurs tels que ce pseudo-élément pour le moment, bien que un problème ait été soulevé concernant l'ajout de cela à la spécification. Cela signifie que vous ne pouvez pas modifier votre code pour faire une chose quand vous avez du support et quelque chose d’autre si vous n’avez pas. Dans la plupart des cas, le retour au marqueur normal constitue une solution raisonnable.

Les compteurs

Les listes ordonnées sont numérotées – ce qui est obtenu au moyen d'un compteur CSS. La spécification CSS Lists décrit donc également ces compteurs. Nous pouvons accéder et créer nous-mêmes des compteurs qui, combinés au pseudo-élément :: marker peuvent nous fournir des fonctionnalités utiles. Ces compteurs peuvent également être utilisés dans un contenu généré régulièrement (non :: marker ).

Si j'ai une liste numérotée d'étapes (et j'aimerais écrire «Étape 1», «Étape 2 ”, Etc.), je peux le faire en utilisant le contenu généré dans mon marqueur et en ajoutant le compteur de l'élément de liste cela représente le compteur intégré:

 :: marker {
  content: "Step" compteur (élément de liste) ":";
}