Twitter | Search | |
Keith Cirkel
All of GitHub's menus & dialogs work without JavaScript. The brilliant figured out that `<details>` elements could make popover menus work without JS ! We've got open source helpers too:
Reply Retweet Like More
Jonathan Leonard Feb 20
Why is “without JavaScript” even a goal though? Is this like demoscene? Neat because of challenge but not of practical import? (Yes, I think so).
Reply Retweet Like
Keith Cirkel Feb 20
It’s a goal because it means we get to ship less bytes to the browser by relying on native functionality. It’s a goal because it goes a long way for accessibility gains. It’s a goal because it means we can aggressively drop older browsers while still retaining good functionality
Reply Retweet Like
Jonathan Leonard Feb 20
Fewer bytes is the only one of those that is remotely valid. And with minification/ compression/ code splitting, I seriously doubt it matters. Accessibility should be solved once for all (if Google can crawl JS, then it’s possible). JS does not prevent aggressive deprecation.
Reply Retweet Like
Keith Cirkel Feb 20
Serving JS (that works) to older browsers is maintenance overhead that we can forgo by using progressive enhancement (of which this is part of). WRT accessibility being solved, “should” and “is” are two very different things.
Reply Retweet Like
Rob Cresswell Feb 21
Sorry, not trying to be difficult here, just curious; you mentioned older browsers, but <detail> isn't supported by IE, I thought? How does this help there?
Reply Retweet Like
Keith Cirkel Feb 21
Great question! We serve a handful of polyfills to older browsers to ensure stuff like <details> works. Dropping IE from our main scripts allows us to ship things like native async/await to other browsers.
Reply Retweet Like
Rob Cresswell Feb 21
Gotcha, thanks!
Reply Retweet Like
Thomas Wang Feb 22
Wow, that's incredible. Github making sure to not compromise on accessibility is seriously impressive.
Reply Retweet Like
Stephen Nixon Feb 22
Dumb question ... I get how it opens without JS, but how does it close? Do <details> elements get a :before pseudoelement that can then be styled as the background scrim?
Reply Retweet Like
Zach Leatherman is at @jamstackconf Feb 22
I believe the entire `summary` element is clickable to toggle it open and closed
Reply Retweet Like
Zach Leatherman is at @jamstackconf Feb 22
(that’s not a dumb question at all!)
Reply Retweet Like
Stephen Nixon Feb 22
Ahhh nice, so that entire <summary> element gets styled as the scrim? Briliant! I need to try this out on something I'm making. 😺 (Thanks! It was a dumb question in that, were I sitting at a computer rather than on my phone, I could have inspected it to find out.)
Reply Retweet Like
Stephen Nixon Feb 22
Thinking further, I don't think I said that quite accurately. I'll still have to inspect when I get the chance.
Reply Retweet Like
Zach Leatherman is at @jamstackconf Feb 22
Upon testing this it was a very good question, as closing the dialog does not work when JavaScript is disabled. Wonder if it could be fixed—still a great feature though.
Reply Retweet Like
Keith Cirkel Feb 22
IIRC clicking the "X" doesn't close it but you can click the overlay to close. Overlay is part of "<summary>" element. Not perfect but pretty darn close.
Reply Retweet Like
Zach Leatherman is at @jamstackconf Feb 22
Wow, awesome! So maybe just remove that X until JS loads 👍🏻
Reply Retweet Like
Carl Armbruster Feb 22
Replying to @Keithamus @muanchiou
Reply Retweet Like
Keith Cirkel Feb 22
Polyfills exist for it!
Reply Retweet Like
just-boris Feb 24
If it doesn’t need JavaScript, what is this file for?
Reply Retweet Like
Keith Cirkel Feb 24
It adds extra behaviours! For example pressing escape to close the dialog, of firing additional events for further customisation.
Reply Retweet Like