A Minecraft clone made with pure HTML & CSS – no JavaScript.

Hacker News is a community-driven platform for sharing and discussing technology news, startups, and programming-related topics. Through user submissions and comments, Hacker News offers insights into emerging technology trends, industry developments, and entrepreneurial ventures. Readers can participate in discussions, share their insights, and stay informed about the latest advancements in technology and innovation.

Hacker News

Explore a Minecraft clone designed using only HTML and CSS, with no JavaScript involved. For optimal performance, close other tabs and programs. The project utilizes the CSS :has() pseudo-class, requiring an updated browser version for proper functionality.

CSS Minecraft

Wow… Just, wow.
I knew you can do a lot in CSS, but, basically, if you could somehow detect certain key events with CSS (I know it’s not possible, as is the case with mouse events, or rather focus events), it would complete the whole solution. The closest thing is the <code>accesskey</code> attribute in HTML, but it always requires modifier keys to be pressed (e.g. Alt+Shift+letter in Firefox) and has a <code>keypress</code> event nature rather than that of <code>keyup</code>/<code>keydown</code>, so it’s not usable here.
One could do a shim web component that captures key events and puts them as attributes on HTML element somewhere (for CSS to base on them), but that requires using JS, even if just a little

Interesting BUT did you’ve seen the 3MB index.html
Every block in the world exist already in the (DOM)-World. It’s just hidden with simple display none and it’s not very optimal performance.
Anyway very clevery idea that a block/cube is an input-element do set the display on/off and style it with pure CSS logic.