3 ms·
I've got a toolkit of pure CSS widgets I privately call "You might not need Javascript". Dropdowns, modal/lightbox, concertina, slideovers, toggles, popover, t
by inopinatus 6y ago
I've got a toolkit of pure CSS widgets I privately call "You might not need Javascript". Dropdowns, modal/lightbox, concertina, slideovers, toggles, popover, transitions, no problem.
Hacks with :checked are well known, but you can do a ton of stuff with :focus-within, :invalid, :target, :hover, <details>/<summary>/[open], grids/flexbox/visibility, and the adjacent-sibling selector. <dialog> is almost there, although it still needs a JS activation hook.
It feels really good to have a complete application UI that works with JS disabled, and I can still progressively enhance it with JS for necessary perversions of HTML like ARIA etc.
- marlowe221 6y agoAs new web developer, I would LOVE to learn how to do this kind of thing purely in CSS!
- inopinatus 6y agoMy process: * trial * error * reading the HTML, DOM, and CSS standards documents very thoroughly end-to-end * stackoverflow * repeat