
Interaction without JavaScript: common UI elements with a CSS-only pattern - ekrof
http://codepen.io/ekrof/pen/YqmXdQ/
======
CGamesPlay
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.

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

------
franciscop
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/](http://picnicss.com/)

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

~~~
ams6110
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.

~~~
allendoerfer
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.

------
mcbits
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.

~~~
Lerc
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...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Global_attributes/accesskey)

<input type="checkbox" accesskey="q">

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.

------
tacone
Nicely done.

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

------
King-Aaron
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.

