People expect to easily dismiss the menu. Dialog elements, unless you include javascript, don’t seem to handle clicking outside, no longer hovering, or hitting escape. That’s the only reason I rarely use details for more than buttons requiring two clicks to activate (for more dangerous functionality)
Is there a solution that allows this without JS? It seems a shame to throw out something where the basics work without JS just because some extended functionality doesn’t.
It doesn’t look like JS is necessary for click-outside-to-close. The slide I linked to in my comment shows an example of it. I tried it just now by turning off JS using Firefox dev tools, then closing the menu and the modal by clicking outside, and it closed! The modal was a bit funny though, the X button didn’t work, but clicking outside did.
Neat. One thing to note about the <details> tag is that all of its contents will be rendered on the DOM, even if not displayed - which is what you’d expect. But often for various reasons, an implementation will want the contents lazily rendered, only mounted when the details are expanded, and the builtin tag doesn’t offer this.
There’s actually a really great benefit here that isn’t talked about as much as I think it should be, search. Lazy rendering of DOM renders the built in search of the browser kinda useless. The contents of <dialog> being searchable means I can search through menus and more without requiring additional JS search.
Good point, plain text should normally be eagerly rendered because of this - lazy loading is good for heavier resources like images, and sometimes components for behavioral reasons.
I’ve started to use it this spring, everywhere, from menus to collapsibles (accordions).
So far so good in terms of functionality. In terms of styling it’s like the ‘select’ box: the default styles needs to be tweaked to look good on all browsers.
Together with snap-scroll, disclosures replace two custom components in my library (carousel, accordion / collapsible) with a native approach.
I was particularly excited about the idea of modals without JS, especially after seeing this slide. Crazy!
People expect to easily dismiss the menu. Dialog elements, unless you include javascript, don’t seem to handle clicking outside, no longer hovering, or hitting escape. That’s the only reason I rarely use details for more than buttons requiring two clicks to activate (for more dangerous functionality)
Is there a solution that allows this without JS? It seems a shame to throw out something where the basics work without JS just because some extended functionality doesn’t.
Sure, you can add the rest of the functionality with JS. That’s what GitHub does.
It doesn’t look like JS is necessary for click-outside-to-close. The slide I linked to in my comment shows an example of it. I tried it just now by turning off JS using Firefox dev tools, then closing the menu and the modal by clicking outside, and it closed! The modal was a bit funny though, the X button didn’t work, but clicking outside did.
That said, I didn’t look into how it works yet!
Neat. One thing to note about the
<details>tag is that all of its contents will be rendered on the DOM, even if not displayed - which is what you’d expect. But often for various reasons, an implementation will want the contents lazily rendered, only mounted when the details are expanded, and the builtin tag doesn’t offer this.There’s actually a really great benefit here that isn’t talked about as much as I think it should be, search. Lazy rendering of DOM renders the built in search of the browser kinda useless. The contents of
<dialog>being searchable means I can search through menus and more without requiring additional JS search.Good point, plain text should normally be eagerly rendered because of this - lazy loading is good for heavier resources like images, and sometimes components for behavioral reasons.
I’ve started to use it this spring, everywhere, from menus to collapsibles (accordions).
So far so good in terms of functionality. In terms of styling it’s like the ‘select’ box: the default styles needs to be tweaked to look good on all browsers.
Together with snap-scroll, disclosures replace two custom components in my library (carousel, accordion / collapsible) with a native approach.
Feeling grateful.