Share
Saviez-vous qu'avec CSS, vous pouvez créer un compteur? Cela peut être particulièrement utile dans les cas où le décompte est purement nécessaire pour la présentation Je vais vous montrer comment utiliser contre-incrément dans cette astuce utile.
C'est vraiment très simple. Nous ne parlons même pas de CSS3 ici; la contre-incrément la propriété existe depuis un moment maintenant. C'est juste que beaucoup d'entre nous ne le connaissent pas ou ne l'ont pas trouvé utile.
Nous commençons par appliquer le contre-incrément propriété. Imaginons que nous ayons un ensemble de cases, et que chaque case devrait afficher un nombre correspondant à l'ordre dans lequel la case apparaît dans sa séquence..
.box counter-increment: boxes;
le
contre-incrémentproperty peut accepter une ou deux propriétés. Le premier est unidentifiantque vous utiliserez plus tard pour référencer ce compteur spécifique. Vous pouvez également passer un deuxième paramètre qui fait référence à l'incrément. Par exemple, au lieu de 1, 2, 3, 4, vous pouvez passer à 5, 10, 15, 20 en appliquant:contre-incrément: cases 5.
Ce code va maintenant stocker un numéro unique pour chaque élément qui a un classe de boîte. Mais bien sûr, nous voulons avoir ce numéro sur la page. Espérons que nous pourrons, à un moment donné dans l’avenir, utiliser le contenu propriété dans les sélecteurs standard, mais pas tout à fait. Au lieu de cela, nous utiliserons des pseudo-éléments pour appliquer le contenu.
.boîte: après contenu: compteur (boîtes);
Ceci appliquera un numéro unique - là encore, basé sur l'ordre de l'élément dans la séquence - à la .boîte élément. Devrions-nous avoir besoin de réinitialiser cette commande à 1 à un moment donné, nous pourrions utiliser remise à zéro: boîtes propriété.
Maintenant, vous pensez peut-être encore: "Pourquoi utiliserais-je cela?" Il y a beaucoup de situations où cela peut être utile. Par exemple, considérons une section de commentaires d'un blog. Si vous vouliez fournir
un numéro pour chaque commentaire de l'ensemble - éventuellement légèrement transparent - vous pouvez utiliser cette technique. Le nombre n'est pas vital pour le balisage et n'est utilisé que pour la présentation. Dans ces cas, CSS
les compteurs feront bien l'affaire!
Accentsconagua