I made something very similar for fun a few years ago[0] and added it to a repository called You-Dont-Need-JavaScript[1].<p>CSS-only for this sort if thing is totally contrived, but making it still proved to be a fun little exercise.<p>[0]: <a href="https://codepen.io/scryptonite/pen/oLGzdj" rel="nofollow">https://codepen.io/scryptonite/pen/oLGzdj</a><p>[1]: <a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript" rel="nofollow">https://github.com/you-dont-need/You-Dont-Need-JavaScript</a>
These exercises will be a lot more fruitful to read through if the author can acknowledge the contrived nature of these attempts and provide a real-world advantageous use case of the techniques outlined
That's super cool! The `:checked` and `:valid` and `:invalid` selectors are really powerful tools when it comes to CSS. This is a real fun use of clever CSS selectors.<p>I was doing something similar the other day with toying around trying to come up with an HTML/CSS only game. I ended up with this: <a href="https://codepen.io/billnreed/full/boXrVr" rel="nofollow">https://codepen.io/billnreed/full/boXrVr</a>
In doing this, you break HTML semantic relationships. Each to-do is a child of the previous to-do. That hurts.<p>I applaud the work in making something sans JS for the kicks of it, but if your going to do it, at least don't break HTML.
These kinds of tricks are nice for progressive enhancement - you can have a navigation section in your server-side-rendered SPA that outputs a fully usable nav like this, and if a user has JS disabled, they'll still be able to navigate around your site, albeit with hard page reloads instead of more instant transitions. It's funny that people are using js frameworks to render js-free snippets that are then progressively enhanced with more js, but that's web development today.
I know a lot of people hate JavaScript, but is HTML+CSS really a more pleasant programming approach? The "solution" seems worse than the problem.