Maybe I’m just old (coughs dust), but if you can make a click do something in HTML and CSS alone, it always feels cool and fancy to me. Even just “click to go to another page”, the foundation of the web, is cool and fancy. And if it happens to go to a same-domain URL, you can animate it, which so happens to be the subject of our CodePen Challenge this past week.
Perhaps the first “trick” for click-something-do-something in HTML+CSS was The Checkbox Hack, where we could style based on the input:checked ~ .something-else style selector. With this tiny bit of interactive state, people built incredible things.
But a lot has changed since then. Even just <details> came along and gave us an open/closed state with a click, which you can also select off of in CSS.
Heck, we can use an “invoker” to open a dang anchored popover with a trivial amount of code.
Or that we can pop a ::scroll-button on a scrolling container and get a literal clickable button that scrolls the area? What?? Check out my quantity query carousel for an example there.
It’s just not that hard anymore to get click-something-do-something action out of HTML and CSS alone. Here are a few more examples I’ve collected recently.
- Stacy Kvernmo shows off how to make an image gallery. There actually is a little bit of JavaScript on this one, but I’m pretty sure you don’t 100% need it if you used invokers (like this beauty). There are are ton of other important features she covers here though.
- Gurveer Arora made Flappy Bird with HTML and CSS alone. Making something go up and down in CSS isn’t hard with
@keyframes, which you could trigger on a:focusevent or something, but how do you get it to start from wherever the bird happens to be at the moment? Gurveer has a clever idea. I think I would have tried something withanimation-compositionas I’m occationally reminded how interesting that is. - Jim Nielsen has this icon site with grids of icons that you resize. That feels like an awfully JavaScript-y thing to do, which it was, until Jim replaced it with just different pre-rendered HTML pages that do the same thing. No JavaScript required.
- Adam Argyle’s new library Prop For That is JavaScript, but the point is not wanting to write or think about JavaScript, just have access to things that only it has access to but from CSS. Like mouse position, for example.
- Maybe thinking a little HTML-first is good for us. Alistair Davidson says a project had double the form submissions after a little taste of that.