Astuce Utiliser les compteurs CSS pour styler des éléments incrémentiels

Learn CSS: Le guide complet

Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..

Dans ce petit conseil, nous aborderons les bases des compteurs CSS; une fonctionnalité CSS utile, mais pas si connue. Lorsque nous aurons terminé la construction de notre démo, nous examinerons quelques exemples concrets de sites utilisant les compteurs CSS..

L'objectif: dessiner une liste ordonnée

Dans un premier temps, regardons la disposition que nous allons construire:

Rien d'extraordinaire, non? Voici le défi cependant: nous allons utiliser un balisage sémantique, en évitant la tentation d’utiliser inutile div et envergure éléments pour construire ces marqueurs de compteur.

Discutons d'une solution propre et flexible!

Compteurs CSS

Pour générer la mise en page susmentionnée, il suffit de définir une liste ordonnée. À ce stade, vous vous demandez peut-être si nous aurions pu utiliser un autre élément, voire une liste non ordonnée. La réponse courte est "oui", mais gardez à l'esprit qu'une liste ordonnée est le seul élément qui décrit avec précision la structure de notre page..

Vous demanderez alors probablement s'il est possible de personnaliser entièrement l'apparence des numéros de liste ordonnée, en créant ainsi la présentation souhaitée. Styliser les numéros de liste ordonnée serait vraiment délicat. Heureusement cependant, il existe une approche alternative multi-navigateur, alors laissez-nous cacher les numéros de liste par défaut et tirez parti des compteurs CSS.

Syntaxe

Les compteurs CSS nous permettent de générer des nombres basés sur des éléments répétés et de les styler en conséquence. Considérez les compteurs CSS comme des variables dont les valeurs peuvent être incrémentées. Regardons la syntaxe de base:

Créer un nouveau compteur

Ici, nous créons un nouveau compteur sur une liste ordonnée et définissons sa portée. Nous utilisons le remise à zéro propriété.

La première valeur est le nom du compteur
suivi d'un paramètre facultatif qui définit la valeur de départ du compteur (par défaut: 0). Notez que le compteur commencera toujours à compter vers le haut, donc le premier généré la valeur dans notre cas sera 1.

Styliser l'élément enfant

Dans ce deuxième diagramme, nous pouvons voir que nous appelons la ::avant pseudo-élément du li sur notre liste.

Ici, nous avons ajouté la valeur du compteur à la contenu de nôtre ::avant. Il est à noter qu'en utilisant des compteurs CSS avec la propriété content, nous pouvons concaténer (joindre) les nombres générés avec des chaînes..
Nous nous référons au nom de notre compteur
et définir le style du compteur comme étant «décimal». Les valeurs possibles ici sont similaires à celles utilisées pour la type de liste propriété.
dans le contre-incrément règle nous nous référons à nouveau au nom de notre compteur
utilisez ensuite un paramètre facultatif pour indiquer de combien le compteur est incrémenté. La valeur par défaut est 1.

Balisage

Sur la base de ce que nous venons de discuter, voici notre balise:

  Élément de liste
 Du texte ici.
 
  Élément de liste
 Du texte ici.
 
 <-- more list items here -->

Et le CSS associé:

ol counter-reset: section;  li list-style-type: none; taille de la police: 1.5rem; rembourrage: 30px; marge inférieure: 15 px; arrière-plan: # 0e0fee; couleur: #fff;  li :: before content: counter (section); incrémentation de compteur: section; affichage: inline-block; position: absolue; à gauche: -75px; en haut: 50%; transformer: traductionY (-50%); rembourrage: 12px; taille de police: 2rem; largeur: 25px; hauteur: 25px; text-align: center; couleur: # 000; rayon de bordure: 50%; bordure: solide 3px # 000;

Cela nous donne le résultat ci-dessous:

Limites

À ce stade, il est important de noter que les pseudo-éléments ne sont pas accessibles à 100%. Pour tester cela, j'ai fait un test rapide. J'ai installé NVDA et utilisé Chrome 50, Firefox 45 et Internet Explorer 11 pour prévisualiser la page de démonstration..

Ce que j’ai trouvé, c’est que lors de l’utilisation d’Internet Explorer, le lecteur d’écran n’annonce pas le contenu généré. Ces jours la majorité Nombre de lecteurs d’écran reconnaissent ce type de contenu, mais vous devez être conscient des limites possibles et donc décider quel contenu est suffisamment sûr pour être généré à l’aide de pseudo-éléments.

CSS Counters à l'état sauvage

Maintenant que nous connaissons les bases des compteurs CSS, nous sommes prêts à montrer quelques exemples illustrant leurs cas d'utilisation potentiels..

Premièrement, les compteurs CSS sont couramment utilisés dans les journaux en ligne. La plupart du temps, vous les trouverez dans les barres latérales:

le journal Wall Street

Handelsblatt

Les compteurs CSS peuvent également être utilisés dans les sections décrivant les étapes ou donnant des instructions. Voici juste un exemple:

SpikeNode

Exemples de HTML gonflé

Dans la section précédente, nous avons vu deux journaux en ligne qui exploitent les compteurs CSS. Voyons maintenant deux autres journaux qui utilisent du balisage gonflé (bien que le contenu soit accessible) au lieu des compteurs CSS:

Washington Post

Gardien

Conclusion

Dans cette astuce, nous avons appris à utiliser les compteurs CSS pour styliser les éléments de la liste ordonnée. Résumons brièvement ce que nous avons couvert:

Les compteurs CSS constituent une excellente solution pour chaque projet nécessitant un ordre dynamique avec des styles personnalisés. D'autre part, ce n'est pas une solution entièrement accessible, alors soyez conscient de ses limites et utilisez-le correctement.
Pour configurer les compteurs, nous devons spécifier deux propriétés (i.e. remise à zéro,contre-incrément) et une fonction (compteur() ou compteurs ()).
Les pseudo-éléments sont responsables de l'affichage des compteurs. Rappelez-vous que cela se passe via le contenu propriété, qui n'est disponible que pour les pseudo-éléments.

Avez-vous déjà utilisé des compteurs CSS dans vos projets? Si oui, assurez-vous de partager avec nous votre travail!

Création de sites web