css-sweeper

Minesweeper has become the go-to proving ground for "can this technology actually build a game," and css-sweeper is one of the more serious attempts at answering that question with CSS alone. The claim in its own title — implemented in CSS + HTML, no JavaScript — holds up under direct inspection: the only <script>-adjacent thing anywhere in the page is a font stylesheet link, and every piece of game state, from a single revealed cell to the seven-segment mine counter at the top of the board, is wired through chains of hidden <input type="checkbox"> and <input type="radio"> elements composed with a CSS custom-property trick its README calls Space Toggle. It's real engineering, not a trick title, and it's popular for exactly that reason — 857 GitHub stars and commits as recent as the end of last month, six years after the project's first release.

A properly redesigned win condition, not a shortcut

What's genuinely clever here isn't just that it works, but how the author adapted the rules to what CSS can and can't do. A normal Minesweeper flood-fills every connected empty area the moment you reveal one — trivial in a language with loops, impossible in one without them. Rather than fake it or give up, the README explains the actual fix: the win condition was redesigned around flagging instead. Flag every mine, don't flag anything that isn't one, and you win — revealing cells becomes an optional way to gather number clues rather than the objective itself. It's a change that respects what the medium can do rather than working around a missing feature, and it still produces a real, satisfying puzzle to solve. The touch layer gets the same care: a dedicated flag-mode toggle switches what a tap does across the whole board, the same solution PROXX uses for the exact same left-click/right-click problem, and it's a genuinely well-reasoned answer on paper.

The number that matters more than any of that

Here's the fact that decides this review, and it's not a matter of opinion: every one of the sixteen preset boards, and the random generator alongside them, is fixed at 30 columns by 16 rows — Minesweeper's classic "Expert" difficulty, confirmed directly against the ID range of every cell checkbox in the page (sweepgrid-0-0 through sweepgrid-15-29). There is no smaller, easier board anywhere in the game. Measuring the actual rendered cell size on a simulated 390-pixel-wide phone screen puts each cell at roughly 12.5 by 12.5 CSS pixels — not an estimate from a screenshot, but the real number getBoundingClientRect() reports for the cell element itself. A human fingertip's contact area on a touchscreen runs somewhere around 40 to 50 CSS pixels; a 12.5-pixel target is smaller than that by a factor of three or four, adjacent to 479 other targets exactly the same size with no gap between them. Whatever mechanism drives the cell underneath — and the checkbox/label activation genuinely does work correctly when hit precisely, confirmed directly rather than assumed — a real thumb is not going to hit the intended cell reliably at that size, and there's no setting anywhere to make the board bigger or the phone's board smaller.

Reaching the board at all adds its own friction on top. Getting from the field-select screen to an actual game means navigating a stack of full-page CSS :target panels — the field picker, a "click-click!" confirmation overlay that sits on top of the board's own upper rows — and testing repeatedly found this stack awkward to navigate precisely on both the phone and desktop profiles, landing taps on the wrong layer more than once during this review's own testing. None of that is explained in-game either: there is no help text anywhere describing the flag-only win condition or the flag-mode toggle, so a first-time player is relying entirely on decades-old Minesweeper convention with zero on-screen guidance from the game itself.

One more thing worth flagging before publishing

The copy of the page installed for this review had a Google Analytics beacon (gtag.js, property UA-146833088-2) loading on every visit. That specific Universal Analytics property was shut down by Google itself in mid-2023, so the beacon fires into the void rather than actually tracking anyone — but it was still there, still requesting a third-party script on every load, and it has been stripped from the hosted copy here rather than left in.

The verdict

Judged purely as a piece of CSS engineering, css-sweeper is exactly as clever as its star count suggests, and the win-condition redesign in particular shows real thought about what the medium is actually good at. Judged as a game to hand someone on their phone, which is what this shelf promises, it fails on a number that isn't up for debate: a fixed Expert-sized board rendering cells a third the size of a fingertip. Play it on a laptop for the novelty. Don't expect to clear a single field on a phone.