Laying out playing cards in CSS

A hand of eight or ten cards has to fit a phone width without hiding ranks. This entry records the CSS approach used in the prototype, including how overlap is done and how keyboard focus is kept visible.

The hand is a horizontal flex row. Each card is a fixed-aspect button. Negative margin on all but the first card creates the overlap (about 40 percent of the card width on a narrow screen, less on a wide one). The last card, and the card that has focus or selection, get a higher stacking order and a slightly raised translate so the rank is not covered. The overlap is a layout choice, not an animation.

Focus must remain visible. A thick outline on the focused card is enough, and it has to sit above neighbours. I also set tabindex="0" only on the cards that can currently be played; the others are left out of the tab order for that turn. That saves a long walk through dead cards when a player is defending with three legal ranks.

If the user has asked for reduced motion, the raise on selection should not slide. A static offset is enough. The overlap itself does not need to move. I have not added drag-and-drop. Click or a key is enough for a legal-move prototype, and drag would need its own note on drop targets.