CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

Here's that @CodePen link! 🚀 You'll need to be in a browser that supports CSS :has() to see this in action, ideally Chromium for full support 👀

There's a little "trickery" here 🤫 I'm using JavaScript to generate the static game board. But, it would be cool to have something like @Netlify build out a new page each day with a different game 🤓 Here's the @CodePen with the JS generation ✨

Side note: Don't drop this in production 😅 The a11y on it isn't great as with most "CSS only games". But, it's a rad experiment for pushing the limits with CSS :has() Got another one tomorrow that has some wild rules 😁 Stay tuned for that one!

Also, if you wanna read all about CSS "@ property" which is used for this pure CSS timer, check out this article I wrote for @css ✨ It shows you how to build a pure CSS stopwatch 👀 And here's a pure CSS 3D stopwatch 👇 👉

@CodePen :has( Firefox ) false

@CodePen never thought of using has() on root for this purpose. gonna give myself a few hours tomorrow to test this puppy out. Thanks again for sharing.

@CodePen What does --show-fail: 1; equate to? It seems like a Boolean of a var, so if your rule has() returns true then fail is true. But what does the var do?

@CodePen In this demo, it reveals the losing "dialog"

@CodePen @SaveToNotion #Thread #CSS

@CodePen Great work, Jhey!