View for Ultimate Tic-Tac-Toe board

I've put together a board for Ultimate Tic-Tac-Toe (What's that?). This is part of the current code-challenge: Code a Ultimate Tic-Tac-Toe

Resources:

• Live demo of my view – For you to see what I did there

• Simon's working implementation – To illustrate that this is going to be a functional game

Questions:

• What are your thoughts on the Markup? Overkill? Just right?

• What would you improve on the CSS side? Especially asking in the direction of absolute dimensions and borders.

HTML:

CSS:

```
, :before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
margin: 0;
}

/*
* GAME
* Board size is calculated as follows:
*
.game = .area 3
459px = 153px 3
*
.area = padding-left + .tile 3 + padding-right + border
153px = 3px + 48px 3 + 3px + 3px
*
* .tile = padding-left + .width + padding-right
* 48px = 3px + 42px + 3px
*/
.game {
width: 459px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}

/ Clearfixing .game /
.game:after {
content: "";
display: table;
clear: both;
}

@media screen and (max-width: 500px) {
.game {
width: 315px;
}
}

/*
* AREA
*/
.area {
float: left;
width: 153px;
padding: 3px;
}

.area:nth-child(3n-1),
.area:nth-child(3n-0) {
border-left: 3px solid #444;
}

.area:nth-child(4),
.area:nth-child(5),
.area:nth-child(6),
.area:nth-child(7),
.area:nth-child(8),
.area:nth-child

It looks good. I like the way it adapts to smaller windows.

I'm not sure why (except as an aretfact of styling) you have a div around each button; maybe the button alone would do.

Instead of using divs it might be possible/appropriate to use tables instead.

You haven't demonstrated (although Simon's game does demonstrate) how you intend to mark played buttons with an O or X; nor how to draw a line through won games. I'd find it easier if X and O were different colors (e.g. blue and red to reflect the colors you chose for won games); and I don't like the font-size: small used in your clean.css.

To draw a (horizontal, vertical, or diagonal) line through won games, maybe make the buttons semi-transparent so that the line can be a CSS background.

When a quadrant is unplayable (because the opponent played elsewhere), do you still intend to draw buttons in that quadrant, or something else?

Do you need to do anything to adjust the apparent size on a 'retina' (double-density-pixel) display?

Does each button need a name attribute and should they be embedded in a form? Or will you be adding javascript?

Maybe make the index 1-based (1 through 9) instead of 0 based (0 through 8). Have you thought about accessibility (e.g. someone using a screen-reader)?

Maybe supply the game state in JSON as well as HTML, so that a bot that's playing (e.g. perhaps a Greasemonkey script) doesn't need to scrape the HTML to discover the game state.

Why are you using px instead of em or % to specify CSS dimensions?

StackExchange Code Review Q#40888, answer score: 10