7 ms·
The details / summary thing absolutely kills me. There’s basically nothing you can’t do with them. Hiding and replacing markers is easy. But every component l
by eleventen 10mo ago
The details / summary thing absolutely kills me. There’s basically nothing you can’t do with them. Hiding and replacing markers is easy. But every component library just pretends they don’t exist.
It even saves you the effort of all the aria control and expanded tags: these tags don’t need them.
- webstrand 10mo agoDetails works even when it's set display:contents too, for even more flexibility. Can't animate from open›close, yet, though. That's pretty much my last frustration with it.
- shakna 10mo agoI think the CSS support for that has finally landed, though it means targetting a pseudo element instead. Its been a year, so support is probably good enough you don't care if just the animation doesn't happen. https://developer.chrome.com/blog/styling-details https://developer.chrome.com/blog/styling-details
- lelandfe 10mo agoNote that the transition to `auto` in that post relies on `interpolate-size` which has yet to land on Firefox or Safari, and neither have movement right now.
- raybb 10mo agoDo they work well for when you want to preview text? Like show the first 100 characters of a paragraph and then click to expand?
- veqq 10mo agoOf course. That's the summary part
- zahlman 10mo agoYes. For example, on Codidact (https://codidact.com https://codidact.com), limited HTML access is offered along with Markdown when making posts, and the details and summary tags in particular are whitelisted. I've made extensive use of this in some of my content, for example https://software.codidact.com/posts/289251/289252#answer-289252 https://software.codidact.com/posts/289251/289252#answer-289... . If you have NoScript you can easily verify that the expanding sections work perfectly well without JavaScript. They can even be nested, as they are here; and the summary text can contain some other forms of markup without issue. (When crafting the post, however, I had to do some tricky things with whitespace to avoid confusing the Markdown parser.)
- crooked-v 10mo agoYou can't actually control the open state properly from markup (the `open` attribute only sets the default state), which is why I haven't bothered with them.
- eleventen 10mo agoOut of curiosity, why have you needed to? This has never come up for me.
- crooked-v 10mo agoFor a simple example, imagine buttons that opens a modal with a particular arrangement of open/closed accordions for each button.
- sfn42 10mo agoYou can do that with a details element, you just need some code to actually do it. Which I'm pretty sure there's no possible solution that doesn't require some code to do that. Really don't see what your complaint is.
- bikeshaving 10mo agoI’m not sure this is correct. The DOM class HTMLDetailsElement has the `open` property, which you can use to read/write the details element’s state. If you’re using setAttribute/getAttribute just switch to the property. https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetails...
- crooked-v 10mo agoHaving to use the property on the element instance, rather than the actual HTML attribute, is exactly the kind of wrapper code I want to avoid if I'm using a built-in.
- 10mo ago
- maxloh 10mo ago> The details / summary thing absolutely kills me. There’s basically nothing you can’t do with them. Animating the details element is tricky. By the spec, browsers don’t natively support transitions between display: none and display: block.
- qudat 10mo agoAnimating accordions is almost always a bad idea because the content length can make it unbearable. In general I find animations on the web overused and unnecessary
- xp84 10mo agoSeriously. As a user I can count on zero hands the number of times I’ve said “Oh great, I’m sure glad this UI is animated!” - and likewise zero times have I missed it when animation isn’t used. Animation is a way to light small units of your users’ precious time on fire, for zero benefit.
- normie3000 10mo agoAnimations are also a way to explain causal relationships between interactions and their results, and to help build mental models of software behaviour.
- TeMPOraL 10mo agoBeing related to neither software behavior nor the structure of the underlying problem, animations tend to obscure the causal relationships and make it harder for user to build a correct mental model.
- kaoD 10mo agoI see where you're coming from: animations are overused and even when they make sense they are made too slow and flashy (because otherwise how would the implementors feel like they did something if it's barely noticeable?) Animations are like bass in music: most people notice them only when they're missing or bad.
- rado 10mo agoYou can’t force it to be always open on desktop and collapsible on mobile. That was a deal breaker for me.
- sunaookami 10mo agoWhen you search text with ctrl+f it also searches inside details elements and automatically expands them!
- dspillett 10mo agoOoh, that sounds useful as a pretty mix-in-bad-data method for scrapers. Have a few of these tags do if junk, even though they are hidden it'll look to a scraper that cares about hidden/not like they aren't always hidden so are likely to contain something worth adding to their DB… I'd need to look into what effect this might have on accessibility, but my gut says "very little".
- PhilipRoman 10mo agoFun fact: <details> even works on github and similar sites with markdown-based input. You can post large inline logs in issues without cluttering the conversation.
- sesm 10mo agoI used this for a long time, and only now realized that I'm using html embedding, not some hidden markdown feature.
- chiefalchemist 10mo agoLast I checked that without JavaScript details / summary has accessibility issues. That is, you need JS to add aria-open or similar. It’s odd and frustrating that such an essential tag is not defined to be accessible, afaik.
- asdfaoeu 10mo agoWhy would you need aria attributes if it's summary tag?
- chiefalchemist 10mo agoI presume it has to do with AT and how it typically interprets the tag. TBH IDK other than I’ve seen it come up in accessibility discussions / groups.
- extra88 10mo agoThat's not correct. There is no aria-open attribute and the summary implicitly has the correct ARIA state, aria-expanded, indicating that its details element is either expanded or collapsed. There have been bugs in its implementation, particularly in Safari and differing between mobile and desktop Safari.
- chiefalchemist 9mo agoPerhaps you’re right. What I mentioned might have been an issue that has since fade due to browser and AT updates. Thanks for correcting me.
- WickyNilliams 10mo agoOne drawback of details was that cmd+f search wouldn't play nicely when the details was closed. But now there's a hidden="until-found" you can put on child content, along with an associated event. So you can open the details when a user searches :) super useful
- MrJohz 10mo agoYou don't need the hidden="until-found" for details/summary, because that has those semantics automatically, but you can use that for other elements that behave similarly (for example tabs, which can't quite correctly be implemented with details/summary, and so needs to be done by hand). Also I think the event isn't currently emitted consistently on all browsers (and maybe not at all for hidden="until-found"?) so unfortunately you can't quite rely on that yet if you need to sink some JavaScript state to your html. But in general, yeah, this is a really cool feature.
- WickyNilliams 10mo agoOh huh I didn't know details supported that naturally. I'm guessing this wasn't always the case and my knowledge is simply outdated. TIL!
- MrJohz 10mo agoYeah, support was patchy until recently (and I think that behaviour might not even have been standardised?) so I think a lot of people have assumed that if you want that functionality you need to do something extra.
- extra88 10mo agoYes, Google started revealing the contents of <details> a few years ago, long after the element was supported in all browsers. Firefox added support earlier this year and Safari just added it. Supporting the behavior was related to changing the user agent CSS when they're closed and the other browsers implemented it and hidden=until-found at the same time. https://caniuse.com/mdn-html_elements_details_search_match_opens https://caniuse.com/mdn-html_elements_details_search_match_o...
- tapirl 10mo agoThe details / summary feature can also be implemented with pure css without JavaScript. Here is an example: https://docs.go101.org/std/pkg/io.html https://docs.go101.org/std/pkg/io.html, just click all "+" signs to expand contents. We can also use pure css to implement tab panels. A demo: http://tmd.tapirgames.com/demos.html#section-demo-4 http://tmd.tapirgames.com/demos.html#section-demo-4 Modern css is powerful.
- xorcist 10mo agoWhat is a good reference to learn modern CSS? I seems most books and online resources are quickly outdated.
- tapirl 10mo agoI really don't know. I'm not a CSS expert. I've just picked up bits and pieces of CSS knowledge from Google and AI agents. These results often aren't perfect, so you'll need to make some adjustments.
- jakelazaroff 10mo agoNote that pure HTML and CSS implementations of tabs using <details> and <summary> fail to meet several important accessibility criteria [1]. While you can make something that visually appears to act as a set of tabs, building it accessibly unfortunately still requires JavaScript. [1] https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html#Tab https://adrianroselli.com/2019/04/details-summary-are-not-in...
- tapirl 10mo agoThe pure-css effects I mentioned both don't use <detail>/<summary>.
- jakelazaroff 10mo agoSame caveat applies to the "checkbox hack" or any other pure CSS solution. You cannot create accessible versions of most complex controls like tabs without JavaScript. (That first example could be created semantically and accessibly with <details> / <summary> though!)
- egeozcan 10mo agoI needed to recreate it recently because summary element does not allow headings inside, because it has a button role.