HOW TO COUNT WITH CSS

Hidden away within the depths of the CSS specification you’ll discover CSS counters. As the title suggests they lets you depend a factor in your web page with CSS incrementing the worth each time it seems on the doc.

This is principally helpful if in case you have a tutorial web site — whether or not that be about cooking or internet improvement — all of them have steps to observe, and also you’ll more than likely have to write down the step quantity earlier than the precise content material. CSS counters can assist by doing that mechanically, you possibly can even use it to depend the photographs in your file and add determine numbers earlier than captions.

In this instance I shall be demonstrating the best way to obtain this by making a easy recipe for pancakes and making CSS seek for the start of every paragraph and including the variety of the step earlier than it.

THE HTML

<part>
	<p>Place the flour in a big bowl, make a properly within the centre and pour within the milk and eggs. Give the liquid combination a fast whisk earlier than incorporating the flour. Continue to whisk till you will have a easy batter.</p>
	<p>Now add S tbsp vegetable oil and whisk completely.</p>
	<p>Take a crêpe pan, or giant frying pan, dip some kitchen roll within the oil and thoroughly wipe the within of the pan. Heat the pan over a medium warmth for one minute.</p>
	<p>Add slightly below a ladleful of batter to the pan and instantly begin swirling it across the pan to provide a pleasant even layer.</p>
	<p>Cook the pancake for roughly 30-forty seconds. Use a palette knife to carry the pancake rigorously to take a look at the underside to examine it's golden-brown earlier than turning over. Cook the opposite facet for approx 30-forty seconds and switch to a serving plate.</p>
</part>

The goal on this HTML is that every paragraph is a distinct step and with CSS we are able to add these dynamically by writing as little as A traces of code.

THE CSS

CSS counters use the property counter-increment. It has been round for some time it was really applied in CSS P.B, to make use of it we should first reset the counter’s default worth to zero earlier than something we wish to rely reveals up on the web page, so it’s a good suggestion to outline this within the physique types, like so:

physique 
  counter-reset: steps;  

This line simply units the counter again to zero and it additionally names it, permitting us to later name it and likewise permitting us to have multiple counter on the web page.

The subsequent step is to make use of the pseudo aspect :earlier than to focus on all of the paragraphs and add the step quantity earlier than all of the textual content begins. To try this we have to use counter-increment, then specify the content material. We can simply use the quantity or we will append or prepend some textual content , on this case we’ll prepend “Step ” earlier than the counter’s worth, like so:

p:earlier than 
  counter-increment: steps; 
  content material: "Step " counter(steps) ": ";

We also needs to make this content material stand out a bit of and to try this we’ll give it an even bigger font-measurement than the paragraphs and make it daring:

p 
 coloration: #242424;
 font-household: arial, sans-serif;
 font-dimension: 16px;
 line-peak: 20px;


p:earlier than 
  counter-increment: steps; 
  content material: "Step " counter(steps) ": ";
  font-weight: daring;
  font-dimension: 18px;

If you need to see this concept in motion, you may see the pen I created.

BROWSER SUPPORT

A fixed concern when working with CSS is the browser assist, however since it is a CSS P.B implementation the browser help is nice: it’s supported by all main browsers, desktop and cell , the one important browser that doesn’t assist it’s IE7, and in keeping with my stat counter IE7 is utilized by solely zero.sixty one% of individuals so I assume we will say that IE7 might be departing quickly. Whether or not you could help IE7 relies on the stats of your personal website.

CONCLUSION

CSS counters just isn’t one thing that you’ll use in each challenge but it surely’s one thing that it is best to preserve at the back of your thoughts as a result of sometime it could turn out to be useful.

Have you used CSS counters in a challenge? What makes use of are you able to see for them? Let us know within the feedback.