Interaction without JavaScript: common UI elements with a CSS-only pattern | Hacker News Reader

Interaction without JavaScript: common UI elements with a CSS-only pattern

codepen.io

72 pointsekrof10 comments

There's some good examples in here. The hook for all of them is the label tag, an input with a type of checked or radio, and the :checked selector. I especially like the modal solution.

Thanks, that's exactly the documentation I was looking for on the page, but didn't find because it's just a code dump.

I created many like these, bundled the best and published Picnic CSS [1] as a result. The HTML becomes a bit messy like this but I think it's pretty cool. You basically end shifting the complexity from javascript to html+css.

[1] http://picnicss.com/

Although I appreciate the effort, At the end of the day it's easier comprehend the JavaScript version than the hacky CSS / HTML.

Agree though by allowing JS you expose a larger attack surface than just HTML and CSS. If all you need is simple effects like these you can have a site that works even for people who don't enable JS.

Without having looked at the code I would say the number of people who have browsers supporting the needed CSS functionality is lower than the number of people who browse with JavaScript disabled.

Is there any sort of trick that would let CSS respond to the Escape key? Modals that don't close via keypress are a pet peeve, so I can't see using a CSS-only approach if that's not possible. Otherwise, these are pretty nifty! Could be useful if you're trying to avoid all JS for some reason.

In essence the modals are bound to the state of a checkbox. For this technique to work with escape The question thus becomes "Can you uncheck a checkbox with escape, without JavaScript"

It's not a completely unreasonable thing to ask for.

Seems you can get close with the accesskey attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

It's not very standardized though, you need qualifiers and escape on its own doesn't seem to be available,

I don't know how it interacts with display:none .Ideally accesskey does not apply to display:none items so you could accesskey the same key for many modal close buttons and only have the visible one activate.

Nicely done.

A nice perk is that in many browsers input tags don't lose their state when you hit ctrl+R.

I think it should be noted that this isn't strictly "CSS-only"... Considering you need a css preprocessor to make it work. That's just me being pedantic of course, because this is actually pretty neat.

Reply on news.ycombinator.com