FunctionSource, Your Source for Developer News

<input type="checkbox" id="a11" /><label for="a11">Top left</label>
<input type="checkbox" id="a12" /><label for="a12">Top center</label>
<input type="checkbox" id="a13" /><label for="a13">Top right</label>

<input type="checkbox" id="a21" /><label for="a21">Middle left</label>
<input type="checkbox" id="a22" /><label for="a22">Middle center</label>
<input type="checkbox" id="a23" /><label for="a23">Middle right</label>

<input type="checkbox" id="a31" /><label for="a31">Bottom left</label>
<input type="checkbox" id="a32" /><label for="a32">Bottom center</label>
<input type="checkbox" id="a33" /><label for="a33">Bottom right</label>

If you were given the HTML above and asked to go about making it into a Tic Tac Toe game, you would probably fire up the JavaScript side of your brain and get to work.

Lea Verou fires up the CSS side of her brain and implements the game mechanics with some crazy insane CSS, using:

• It uses hidden checkboxes for the states (indeterminate means empty, checked means X, not checked means O) and labels for the visible part
• When it starts, a little script (the only js in the demo) sets the states of all checkboxes to indeterminate.
• It uses the :checked and :indeterminate pseudo-classes and sibling combinators to change the states and show who won.
• Once somebody clicks on a checkbox (or in this case, its label) they change it’s state from indeterminate to either checked or not checked, depending on how many times they click on it.

You look at some of the CSS and cry, and then you get folk shouting “you are using the wrong tool for the job! insane!” Very true. This isn’t very maintainable, and you wouldn’t want to do anything more than a tech demo like this….. but it does remind you of how powerful CSS truly is.