Comprendre les compteurs CSS et leurs cas d'utilisation

Il existe certaines fonctionnalités CSS que nous n'utilisons probablement pas très souvent. Je pense que les compteurs CSS entrent dans cette catégorie pour la plupart d'entre nous, et plus que probablement pour deux raisons:

1. Ils ne semblent pas avoir de nombreux cas d'utilisation.
2. Le code pour les écrire est un peu complexe.

J'ai récemment vu un cas d'utilisation pratique pour les compteurs, donc j'ai pensé que je donnerais un bref cours intensif dans la façon dont les compteurs sont écrits et partagent ce cas d'utilisation ici.

Les plats clés

• Les compteurs CSS fournissent une numérotation dynamique dans CSS, permettant la numérotation des éléments non consécutifs, qui peuvent être réorganisés sans avoir besoin d'ajuster manuellement la numérotation. Ceci est réalisé grâce à l'utilisation de pseudo-éléments et de CSS contre-spécifiques.
• Malgré les complexités initiales, les compteurs CSS ne sont pas difficiles à maintenir une fois que le concept des pseudo-éléments de CSS est compris. Bien que le contenu généré puisse avoir des problèmes d'accessibilité, la plupart des navigateurs le prennent en charge et sont reconnus par les lecteurs d'écran.
• Un cas d'utilisation pratique pour les compteurs CSS est observé dans les spécifications de niveau 4 des sélecteurs du W3C, où ils sont utilisés pour compter les «problèmes» et les «exemples» entrecoupés dans le contenu. Cela permet une addition, une suppression ou une réorganisation facile des éléments tout en mettant automatiquement à la mise à jour de la numérotation.

un cours intensif dans les compteurs CSS

Les compteurs CSS vous permettent de numéroter des éléments dans CSS en utilisant la numérotation dynamique, semblable à la façon dont une liste commandée fonctionne. Mais les compteurs CSS sont très différents. Cette fonction utilise un pseudo-élément combiné avec des CSS contre-spécifiques pour ajouter / annexer un «nombre» dynamique à un ensemble d'éléments spécifié.

Voici un exemple de code, similaire à celui que j'utiliserai dans la démo à la fin de cet article:

<span><span>.container</span> {
</span>  <span>counter-reset: issues 0;
</span><span>}
</span>
<span><span>.issue:before</span> {
</span>  <span>counter-increment: issues 1;
</span>  <span>content: "Issue " counter(issues, decimal);
</span>  <span>display: block;
</span><span>}</span>

Le premier bloc de déclaration définit la portée du décompte. Cela signifie que mon compteur n'augmentera que dans les éléments qui ont une classe de container. J'ai choisi un identifiant personnalisé appelé «problèmes», qui est nécessaire pour relier le conteneur aux éléments comptés.

Le deuxième bloc de déclaration utilise: avant le pseudo-élément (je pourrais alternativement à utiliser: après, mais ce serait rare dans un compteur) et la propriété de contenu pour prétendre le contenu défini.

Dans le cadre de la valeur de la propriété de contenu, j'utilise la fonction compteur () avec une chaîne, similaire à quelque chose qui pourrait être fait dans JavaScript ou un autre langage de programmation plus typique. La fonction compteur () prend deux arguments: l'identifiant de compteur défini précédemment (dans ce cas, «problèmes») et le style de compteur, qui peut être n'importe quelle valeur utilisée pour la propriété de type de style liste dans les listes ordonnées. La valeur par défaut est «décimale», que j'utilise dans cet exemple.

Si vous êtes toujours confus comment les compteurs fonctionnent, peut-être que cette mini infographie vous aidera:

Et si cela ne suffit pas, voici quelques ressources supplémentaires avec plus d'informations, y compris mon propre article où j'ai initialement publié une infographie similaire:

• Compteurs CSS: Counter-Increment and Friends (WEETS IMPRESSIONNANTS)
• Comment bénéficier du contenu et des comptoirs générés par CSS (Smashing Magazine)
• Styles de compteur CSS Niveau 3 (W3C Spec)

Ce dernier lien est le projet de rédacteur de la spécification des compteurs, qui introduit certaines nouvelles fonctionnalités contre-liées qui n'ont probablement pas grand-chose, le cas échéant, et qui pourraient être à risque dans les futures versions de la spécification. Les fonctionnalités que j'utilise dans cet article, cependant, sont le croisement, remontant à IE8.

Déterminer la valeur des compteurs CSS

À un regard superficiel, deux problèmes majeurs surviennent lors de la première réflexion sur la mise en œuvre des compteurs CSS:

1. Les listes commandées font déjà cela, alors pourquoi aurais-je besoin d'une fonctionnalité si complexe juste pour numéroter les éléments?
2. Le contenu généré n'est pas accessible et cela mélange du contenu avec la présentation.

Le premier de ces deux problèmes n'est vraiment pas du tout un problème. Si vous voulez des éléments consécutifs numérotés, il serait approprié d'utiliser une liste ordonnée (c'est-à-dire un avec des éléments imbriqués

). Mais les compteurs CSS ne sont pas destinés aux articles consécutifs; Ils sont destinés aux éléments non consécutifs, partout où ils pourraient être dans le DOM, puis en mesure de les réorganiser sans avoir besoin de modifier le nombre additionné à chacun.

De plus, bien que les compteurs puissent être un peu complexes en regardant le premier coup d'œil, une fois que vous avez compris le concept des pseudo-éléments de CSS, ils ne sont vraiment pas si difficiles à modifier et à entretenir.

L'autre problème, lié à l'accessibilité, ne semble pas être un problème aussi important que par le passé. Un article de Léonie Watson a conclu:

«[g] Le contenu piqué est une accessibilité pris en charge dans la plupart des navigateurs et reconnue par les lecteurs d'écran en conséquence.»

Le support, cependant, n'est pas à 100%, donc je dirais que si vous allez utiliser des pseudo-éléments pour générer du contenu, le «contenu» devrait être de valeur décorative et non cruciale pour la compréhension ou la fonctionnalité de la Site Web Il est inclus. Avec cette approche équilibrée à l'esprit, il devrait être bien d'utiliser des compteurs dans certains cas comme celui décrit ci-dessous.

un simple cas d'utilisation

Récemment, je regardais les spécifications de niveau 4 des sélecteurs du W3C et j'ai noté qu'ils avaient des «problèmes» et des «exemples» entrecoupés dans le contenu. Je l'ai déjà vu, mais seulement alors j'ai décidé de l'enquêter un peu. Ces éléments sont numérotés, alors je me suis demandé comment ils pouvaient les ajouter et les retirer sans avoir à ré-numéroter l'ensemble à chaque fois. J'ai pensé que c'était peut-être un script, ou bien généré sur le back-end ou quelque chose comme ça.

non. Ils utilisent des compteurs CSS, comme indiqué dans la capture d'écran ci-dessous:

Dans leur page, ils ont des problèmes numérotés (les boîtes rouges) et des exemples numérotés (les boîtes jaunes). En utilisant un identifiant personnalisé pour chaque ensemble compté, ils peuvent facilement ajouter, supprimer ou même réorganiser les éléments et le CSS ajoutera automatiquement les nombres corrects aux éléments.

En outre, ces pages de spécifications incluent également un index de problèmes à la fin de la page, qui utilise le même identifiant de compteur que les problèmes, mais dans une nouvelle portée, il démarre donc le compte frais. La liste des problèmes en double crée un peu plus de travail pour maintenir les problèmes, mais, encore une fois, la commande est généralement facile à entretenir tant qu'elle correspond à ce qui a été modifié dans l'organisme de contenu.

Une démo glisser-déposer

J'ai recréé l'exemple du W3C afin que vous puissiez jouer avec le fonctionnement des compteurs, mais aussi pour voir à quel point il est facile de créer des listes dynamiques de cette manière à partir d'articles non adjacents avec juste HTML et CSS.

Voir le Pen 20FE8F19AE48C210DA6C5DF78C0CF6F8 par SitePoint (@SitePoint) sur Codepen.

Dans la démo, j'utilise la fonctionnalité triable de JQueryui pour vous permettre de glisser et de réorganiser l'un des paragraphes de la page, y compris les cases «Issue» et «Exemple». Notez comment les nombres changent en fonction de l'endroit où les éléments sont traînés (bien que le comportement du nombre semble être un peu excentrique pendant le processus de traînée). J'ai également inclus une «liste de problèmes» en double en bas, comme sur les pages du W3C.

Conclusion

Cela devrait rendre un peu plus clair à quoi les compteurs CSS peuvent être utilisés. Pensez à tout document qui est souvent modifié, peut-être même quelque chose que l'utilisateur a généré lorsque les éléments peuvent être ré-triés ou réorganisés. Et, comme mentionné, ces types de compteurs sont les plus susceptibles d'être utiles lorsque la numérotation n'est pas vitale pour la compréhension du contenu et lorsque les éléments sont non adjacents à la source.

Si vous avez vu des compteurs CSS utilisés d'une autre manière utile, faites-le nous savoir dans les commentaires.

Questions fréquemment posées (FAQ) sur les compteurs CSS

Quels sont les différents types de compteurs CSS?

Les compteurs CSS sont disponibles en deux types: «compteur» et «compteurs». Le type «compteur» est utilisé pour les compteurs à un niveau, tels que la numérotation des en-têtes dans un document. Le type «compteurs», en revanche, est utilisé pour les compteurs à plusieurs niveaux, tels que la numérotation des sous-sections dans les sections. Les deux types sont utilisés avec la propriété «Contenu» dans CSS pour afficher la valeur du compteur.

Comment réinitialiser un compteur CSS?

Les compteurs CSS peuvent être réinitialisés à l'aide de la propriété «Counter-Resset». Cette propriété définit le compteur à un numéro donné. Par exemple, «Counter-Resset: Section» »réinitialisera le contre-zéro« section ». Vous pouvez également définir le compteur sur un autre nombre, comme «Counter-Resset: Section 5;», qui réinitialisera le compteur de «section» à cinq.

Puis-je utiliser les compteurs CSS avec des listes?

Oui, les compteurs CSS peuvent être utilisés avec des listes. Ceci est particulièrement utile lorsque vous souhaitez personnaliser la numérotation des éléments de liste. Vous pouvez utiliser les propriétés «contre-réinitialisation» et «contre-incrément» pour contrôler la propriété de numérotation et de la propriété «Contenu» pour afficher la valeur du compteur.

Comment puis-je styliser les nombres générés par les compteurs CSS?

Les nombres générés par les compteurs CSS peuvent être stylisés comme tout autre texte dans CSS. Vous pouvez utiliser des propriétés comme «couleur», «taille de police», «poids de police», etc., pour coiffer les chiffres. Les styles seront appliqués aux nombres lorsqu'ils seront générés par la propriété «Contenu».

Puis-je utiliser des compteurs CSS pour numéroter les tables?

Oui, les compteurs CSS peuvent être utilisés pour numéroter les tables . Cela peut être fait en utilisant la propriété «Counter-Resset» sur l'élément «Table», la propriété «Counter-Increment» sur l'élément «TR» et la propriété «Content» sur un `` Avant '' ou «après» pseudo -element dans l'élément 'tr'.

Comment créer un compteur à plusieurs niveaux avec des compteurs CSS?

Les compteurs à plusieurs niveaux peuvent être créés en utilisant la fonction 'compteurs' dans CSS. Cette fonction prend deux arguments: le nom du compteur et une chaîne à utiliser comme séparateur entre les niveaux. Par exemple, «Contenu: compteurs (section,«. »); 'Créera un compteur à plusieurs niveaux avec des périodes en tant que séparateurs.

Puis-je utiliser les compteurs CSS avec des pseudo-éléments?

Oui, les compteurs CSS sont souvent utilisés avec les pseudo-éléments «avant» et «après». La propriété «Contenu», qui est utilisée pour afficher la valeur du compteur, ne peut être utilisée qu'avec ces pseudo-éléments.

Comment incrémenter un compteur CSS?

Un compteur CSS peut être incrémenté à l'aide de la propriété «contre-incrément». Cette propriété augmente la valeur du compteur par une à chaque fois qu'elle est invoquée. Par exemple, «Counter-Increment: Section»; . Cela peut être fait en définissant la propriété «Counter-Resset» ou «Counter-Increment» sur un nombre négatif. Par exemple, «Counter-Resset: Section -1;» Définira le compteur de «section» à un compteur négatif.

Puis-je utiliser des compteurs CSS avec d'autres propriétés CSS?

Oui, les compteurs CSS peuvent être utilisés avec d'autres propriétés CSS. Par exemple, vous pouvez utiliser la fonction «compteur» ou «compteurs» avec la propriété «Contenu» pour afficher la valeur du compteur. Vous pouvez également utiliser les propriétés «contre-réinitialisation» et «contre-incrément» avec n'importe quel élément pour contrôler la valeur du compteur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!