Caché au fond de la spécification CSS, vous trouverez des compteurs CSS. Comme son nom l'indique, ils vous permettent de compter une chose sur votre page avec CSS en incrémentant la valeur chaque fois qu'elle apparaît sur le document.
Ceci est principalement utile si vous avez un site Web de tutoriel - que ce soit sur la cuisine ou le développement Web - ils ont tous des étapes à suivre, et vous devrez probablement écrire le numéro de l'étape avant le contenu réel. Les compteurs CSS peuvent vous aider en procédant automatiquement, vous pouvez même l'utiliser pour compter les images sur votre fichier et ajouter des chiffres avant les légendes.
Dans cet exemple, je montrerai comment y parvenir en créant une recette simple pour les crêpes et en effectuant une recherche CSS pour le début de chaque paragraphe et en ajoutant le numéro de l'étape qui précède.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
L’objectif de ce HTML est que chaque paragraphe est une étape différente et que, avec CSS, nous pouvons les ajouter dynamiquement en écrivant aussi peu que 3 lignes de code.
Les compteurs CSS utilisent le compteur-incrément de propriété . Il a été autour pendant un certain temps qu'il a été réellement implémenté dans CSS 2.1, pour l'utiliser, nous devons d'abord réinitialiser la valeur par défaut du compteur à 0 avant que tout ce que nous voulons compter apparaisse sur la page. styles de corps, comme ça:
body {counter-reset: steps;}Cette ligne ne fait que remettre le compteur à 0 et elle le nomme également, ce qui nous permet de l'appeler ultérieurement et nous permettant également d'avoir plusieurs compteurs sur la page.
L'étape suivante consiste à utiliser le pseudo-élément : avant de cibler tous les paragraphes et d'ajouter le numéro d'étape avant que tout le texte ne commence. Pour ce faire, nous devons utiliser le contre-incrémentation, puis spécifier le contenu. Nous pouvons simplement utiliser le numéro ou ajouter ou ajouter du texte, dans ce cas nous ajouterons "Step" avant la valeur du compteur, comme ceci:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Nous devrions également faire ressortir un peu ce contenu et pour ce faire, nous lui donnerons une taille de police plus grande que les paragraphes et la met en gras:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Si vous voulez voir cette idée en action, vous pouvez voir le stylo que j'ai créé.
Le support du navigateur est une préoccupation constante lorsque vous travaillez avec CSS, mais comme il s'agit d'une implémentation CSS 2.1, le support du navigateur est excellent: il est pris en charge par tous les principaux navigateurs, ordinateurs de bureau et mobiles. et selon mon compteur de statistiques, IE7 n'est utilisé que par 0,61% des personnes, alors je pense que nous pouvons dire que IE7 partira bientôt. Que vous ayez ou non besoin de prendre en charge IE7 dépend des statistiques de votre propre site.
Les compteurs CSS ne sont pas quelque chose que vous utiliserez dans tous les projets, mais quelque chose que vous devez garder à l’esprit, car un jour, cela pourrait vous être utile.
Avez-vous utilisé des compteurs CSS dans un projet? Quelles utilisations pouvez-vous voir pour eux? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, compter l'image via Shutterstock.