21 ms·

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

72 points by ekrof 10y ago

CGamesPlay 10y ago
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 10y ago
  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 10y ago
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 10y ago
Although I appreciate the effort, At the end of the day it's easier comprehend the JavaScript version than the hacky CSS / HTML.
- ams6110 10y ago
  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 10y ago
    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 10y ago
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 10y ago
  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_attributes/accesskey https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att... <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 10y ago
Nicely done. A nice perk is that in many browsers input tags don't lose their state when you hit ctrl+R.
King-Aaron 10y ago
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.

72 points by ekrof 10y ago

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 10y ago
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 10y ago

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 10y ago

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

ams6110 10y ago
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 10y ago
  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 10y ago

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 10y ago
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_attributes/accesskey https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att... <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 10y ago

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

King-Aaron 10y ago

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.