Pure CSS Tic Tac Toe

It’s supposed to be used by 2 people taking turns (click twice for the other sign).

Basic idea:

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.

As a bonus, it’s perfectly accessible through the keyboard (although I assume it’s not screen reader accessible).

A <table> would be much more appropriate for the markup, but I decided to sacrifice semantics in this case to make the demo simpler.

All modern browsers support the indeterminate state in checkboxes (for Opera you will need the latest Opera.Next), however this demo doesn’t work on old Webkit (Chrome and Safari) because of an old bug that made the sibling combinators (+ and ~) static in some cases which has been fixed in the nightlies. It should work in Firefox, Opera.next, Webkit nightlies and IE9, although I haven’t tested in Opera.next and IE9 to verify.

Enjoy:

http://www.nahueljose.com.ar Nahuel

Looks awesome, as usual. Doesn’t work properly in Chrome 11 on Windows (it starts on “O Won”) but works great on Firefox 4
http://leaverou.me Lea Verou

Thanks!
Yeah, I mention in the post it doesn’t work on non-nightlies Webkit due to an old bug they had for ages.
http://www.facebook.com/mihalisb Mihalis Bagos

Looks good, but this new trend bothers me to tell you the truth. Struggling to maintain a strict MVC architecture, I would only see css3 being used by js frameworks strictly for animation purposes. Why would anyone use css3 for static ‘bling’ or business logic anyway?
http://leaverou.me Lea Verou

I love MVC too, especially on the backend
The way I see it, demos like this are supposed to show what’s possible, what *can* be done, not what *should* be done.
Anonymous

This is great.
http://pancaketheorem.com/this-new-trend-bothers-me/ “This new trend bothers me” – pancake theorem

[...] seeing the first sentence in this comment on a cool pure CSS tic-tac-toe board, I was reminded of this anti-CSS3-experimentation phenomenon [...]
http://www.xhtml-css.net/css/xhtml-css-templates-pure-css-tic-tac-toe-lea-verou xhtml css templates – Pure CSS Tic Tac Toe | Lea Verou | XHTML CSS – Style sheet and html programming tutorial and guides

[...] original post here: Pure CSS Tic Tac Toe | Lea Verou Share and [...]
Anonymous

Have you seen this?

http://jsdo.it/usualoma/qzfr
It has “AI”
http://leaverou.me Lea Verou

Someone sent it to me after I posted this. It’s cool, although a bit too huge. But nice to show what’s possible!
http://twitter.com/ben_c ✔ Ben Collier

Works in Safari 5.1 beta so I guess they’ve rolled in the upstream fix.

Neat!
Michal Čaplygin

Nice :] Some time ago I used this idea in something I called “Tabindex Captcha” then. Just joke-ish proof-of-concept, see http://jsfiddle.net/Qk3zj/2/embedded/result/
http://leaverou.me Lea Verou

Cool idea!
Yotam Praag

Thats crazy!!
http://functionscopedev.wordpress.com/2011/06/21/tic-tac-toe-with-css-style/ Tic Tac Toe with CSS style | FunctionSource Development

[...] Verou fires up the CSS side of her brain and implements the game mechanics with some crazy insane CSS, [...]
http://swl-projekt.pl/javascript/2422-ttmmhtm-ipad-talks-rainbows-ted-talks SWL-Projekt » TTMMHTM: iPad talks, Rainbows, TED talks

[...] Lea Verou has a CSS only Tic Tac Toe game [...]
Olivier Mengué

The following is wrongly labeled “X won”:
O – X
X X -
O – O
http://leaverou.me Lea Verou

Can’t reproduce it in Firefox. Which browser are you using?
http://makeawesomeweb.com/?p=402 make awesome web » Pure CSS Tic-Tac-Toe

[...] Link: http://leaverou.me/2011/06/pure-css-tic-tac-toe/ [...]
http://ferrante.pl/frontend/javascript/w-dobie-html5-stan-spolecznosci-frontend-w-polsce/ Stan społeczności front-end w Polsce w dobie HTML5

[...] zapierające dech w piersiach efekty (powstań, three.js!), niektóre oparte tylko na CSS3 (np. kółko i krzyżyk, wzory bez użycia grafiki). Poszperajcie w świetnych galeriach dem i efektów na Mozilla's [...]
Philip Stark

yes, css3 should not be used for business logic, buf what would you use for static ‘bling’ if not css? (or maybe I don’t understand what “static ‘bling’” means.)
http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/ Jack Reichert » How to add a divider between menu items in css using only one selector

[...] Verou uses this technique used to create an actual game of Tic-Tac-Toe in pure CSS. The only Javascript used to make the game functional is for setting up the board. Aside from that, [...]