Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

I realize this is an absurd thing to do, but it was fun and I wanted to test the limits of CSS again so I could share the results!<p>I linked to the README since any web devs that see this will probably want to know how buuut here&#x27;s a link to the game if you want to go hands on:<p><a href="https:&#x2F;&#x2F;propjockey.github.io&#x2F;css-sweeper&#x2F;#randommenu" rel="nofollow">https:&#x2F;&#x2F;propjockey.github.io&#x2F;css-sweeper&#x2F;#randommenu</a><p>It&#x27;s all open source, and I discuss some details of how to do it in that readme, but I am more than happy to answer any questions!<p>Thanks for checking it out!

This is really cool! I saw your responsive library[0] post [1] the other day, but couldn&#x27;t quite wrap my head around it.<p>With this post, I think I am starting to grok the (Space Toggle) trick. The Tweet you linked in your library was really helpful [2].<p>My current understanding is – in CSS, you can set a variable to nothing (a space). When a property contains that &quot;blank&quot; variable, it is replaced by nothing and so the second, &quot;fallback&quot; value is the default. Because you can update CSS variables within more specific or later CSS, you can update the &quot;blank&quot; variable and give it a new value of &quot;initial&quot;, this causes it to switch from the default to the defined override.<p>I realized, you can even combine this with the CSS checkbox hack. I made a (super hacky) version of CSS-only dark mode toggle based on your JSBin (gotta love an absolute positioned bg, lol) [3]<p>[0] <a href="https:&#x2F;&#x2F;propjockey.github.io&#x2F;css-media-vars&#x2F;" rel="nofollow">https:&#x2F;&#x2F;propjockey.github.io&#x2F;css-media-vars&#x2F;</a> [1] <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23865900" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23865900</a> [2] <a href="https:&#x2F;&#x2F;twitter.com&#x2F;James0x57&#x2F;status&#x2F;1283596399196680192&#x2F;photo&#x2F;1" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;James0x57&#x2F;status&#x2F;1283596399196680192&#x2F;pho...</a> [3] <a href="https:&#x2F;&#x2F;jsbin.com&#x2F;xelufoyoka&#x2F;1&#x2F;edit" rel="nofollow">https:&#x2F;&#x2F;jsbin.com&#x2F;xelufoyoka&#x2F;1&#x2F;edit</a>

That&#x27;s crazy! The large lag between clicking and the UI updating is slightly annoying, but that&#x27;s just me nitpicking at something other than the cool technical feat.

I think I see my CPU dripping out the side of my laptop.

Very cool. CSS can do some amazing stuff these days. I made a game using moving checkboxes recently - <a href="https:&#x2F;&#x2F;codepen.io&#x2F;onion2k&#x2F;pen&#x2F;qBbKYee" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;onion2k&#x2F;pen&#x2F;qBbKYee</a> - with a timer and scoring. It&#x27;s a fun challenge to avoid JS.

Good stuff! I made a sudoku in CSS (<a href="https:&#x2F;&#x2F;identicalsnowflake.github.io&#x2F;sudoku.html" rel="nofollow">https:&#x2F;&#x2F;identicalsnowflake.github.io&#x2F;sudoku.html</a>) a while back, but it looks like the variable trick mentioned in the readme is a more straightforward way to embed logic, so if I were to make something similar today, I&#x27;d probably pursue that route.

Every day we stray further from God&#x27;s light.

It sort of bothers me how much feature creep CSS itself has undergone. Was it not enough to leave things simpler and just use pre-processors and JavaScript?<p>What hope does one have to implement the entire CSS spec from scratch now?

Very interesting! Can I ask, how did you implement the timer in CSS&#x2F;HTML?<p>And also, what causes the lack of responsiveness?

If this took you, ballpark, 1 month to do, what do you think you would be able to do in a year?

I was sad to discover that Minesweeper is no longer bundled by default with Windows.

I tried this on a low end smartphone. Might as well have been called MineSwapper

Idle question,<p>is CSS&#x2F;HTML turing complete?<p>If so I look forward to a Show HN of a CSS&#x2F;HTML emulator of JSMESS emulating a 386 running Windows 98.

Now, which email clients does this render properly in! I&#x27;m looking forwards to diving through this.

I was so confused why everyone was saying the game is so impressive when all my clicks did nothing but place a ‘?’ where I clicked. Was each ‘?’ an error message? No, it turned out you need to click each square twice to reveal it. The page really needs some instructions, because that is not how normal Minesweeper works.<p>The other thing you need to know to play is that right-clicking won’t flag a square. Instead, you need to left-click on the flag in the top left to toggle flag mode, then left-click on a square to flag it.

I&#x27;m confused -- how do I flag? Right-clicking seems to just bring up the right-click menu.<p>Edit: Nevermind, figured it out. You click on the flag up top to switch between flagging and clearing.

Now do GPT-3.

Oh my god, this is AWESOME!

Very nice. Thanks for sharing.

doesn&#x27;t work in Safari

Doesn’t work on mobile? Safari &#x2F; iOS 13.4.1 here.

Why.

This is very slow in my browser, which I don&#x27;t mean as a criticism. Just refreshing to see something be slow that uses no JS at all :D