Working with Automatic Counters in CSS

Originally Posted on my blog.

If you ever wanted to add an automatic counting component into your HTML/CSS/JS interface, you'd probably use a (heavily styled) numbered list or javascript counter which will be inserted/updated in the DOM. There are a few issues with those options.

Although the first may fit in simple scenarios, it becomes less suitable in more complex cases like when you want the counters to show at parts of the interface distant from each other or you want to create complex styling with multiple elements around your counters. It's very selective.
The second option should simply be "avoided" because it's general regarded as best practice to use CSS for as many design and rendering operations instead of the Javascript (JS) equivalent. The reason is CSS operations are better in performance compared to JS equivalents. CSS doesn't take as much memory and overhead as JS for rendering.

So back to business. How can we create an automatic counter/counting component in our HTML/CSS/JS work.

CSS has an inbuilt counting mechanism that works just like using variables as counters in most programming languages.

We will need the following CSS properties to setup and use counters in our interface.

• counter-reset - Creates a new counter variable or resets an existing counter variable
• counter-increment - Increments a counter value
• content - This refers to the usual CSS content which will be used to contain our generated counter and any other information when ready
• counter() or counters() function - Inserts the value of any counter variable created above It's call to an element.

Lets use a basic example to know how it works.

If you notice, the word number occurs in every use. We can move that into the content rule and build it up there like

Now lets treat an example using 2 counters used at any point within the DOM and reset. It keeps track of the incremental value.

Now lets treat something a bit more advanced and practical. Here is an example from w3 schools that illustrates a real life scenario where you may consider using CSS counters.

Now to my favourite part. How useful is this in design. You can use css counters to create nice components like this one I created.

Any experienced (or growing) UI architect knows It's best practice to keep an interface's markup code as clean as possible. Using CSS counters in the case above makes more sense because;

• You don't have to include the figures in your HTML markup and keep track of them manually
• You don't have to figure out how to MEGA style ordered lists
• And you don't have to use Javascript to insert and update the figures (messy messy messy)

If you are a designer, Im sure you can see the possibilities.

PS:

1. If you are concerned about compatibility, IE8 supports this. You just have to specify a !DOCTYPE.
2. I'm not exactly sure why but only one counter can be created/reset per element. You cant do this:

.animal_story{
    counter-reset: cat_number;
    counter-reset: dog_number;
}

Follow me on Twitter