CSS Dot Matrix Counter

Some ideas can instantly be recognized as bad ones. This was one of those ideas. This was the type of idea that could only be had after reading bits of an autobiography on writing AI and drinking Elysian IPA. But it was simple enough.

Could I create a counter in pure CSS? Something that started at zero, and, with each click, incremented to nine, and then started all over again?

TL/DR, yes, this is possible, check out the pure CSS counter demo.

CSS for Interaction

JavaScript—simply put—exists to handle this type of interaction. Why drag poor CSS into the mix? All it did was try and abstract style form content.

But CSS is powerful now. It's a beast to reckon with. A bevy of intricate CSS selectors has existed since CSS 2.1, and these selectors were greatly expanded in CSS3. In particular, we can now control a few key things:

• Select form elements that are checked or disabled.
• Select next adjascent sibling.
• Select younger siblings (those appearing later in the DOM).
• Select numbered elements, like those that are even, odd, or every-nth-one.

This has led to novel and interesting takes on pure CSS modal shadowboxes. In some ways, these are tour de force examples of what CSS can do. And that's exactly what I'm trying to create here.

The Escapement Mechanism

To get this to work, a couple things happen:

• I've created a five-by-seven grid of dots, and labeled each with a class that names any numeral ('zero', 'one', etc) that it should be lit up for.
• Next up, there is an array of ten radio buttons, each numbered with a class from zero to nine.
• When a radio button of a certain class (say, 'one') is selected, each dot with a class of 'one' is highlighted. This is done by a series of selectors, similar to the following line:
  input.zero:checked ~ .zero {background: #a00}
• Finally, I create a series of labels that control selecting the inputs with a for attribute. I hide the for attribute, and make these labels overlay the entire screen. When a label is clicked on, the number is incremented, and the next control label shown.

This relatively simple escapement is all that is required to increment a counter. Check out the pure CSS counter demo. An abuse of CSS? Perhaps. But it's interesting to push CSS to its limits and see what it can do.