One thing that can be just a smidge funky about the <details> element is that, when open, it’s not always 100% clear what is inside that element and what isn’t. I’m not saying that always matters or that it’s a particularly hard problem to solve, I’m just noting it as it came up recently for me.
Here’s a visual example:
<details> and what isn’t?The solution is… CSS. Style the <details> somewhat uniquely, and that problem goes away. Even if you want the typography to be the same, or you don’t want any exclusive styling until the <details> is opened, it’s still possible. Using an alpha-transparent fill, you can even make sure that deeper-nested <details> remain clear.
Here’s that CSS:
details[open] {
--bg: rgb(0 0 0 / 0.2);
background: var(--bg);
outline: 1rem solid var(--bg);
margin: 0 0 2rem 0;
}And the demo:
I’ve started using the Details and Summary tag for accordions and it makes everything easy except for safari, it’s always creating weird stuff and dont get me started with the marker, it’s the only one that does crazy stuff, is there a post somewhere in here already talking about styling this components all the way?
Styling is sorta tricky at the moment. But Greg Gibson has a nice post covering some techniques as does Chris in this one.
hmmm not sure I like the opacity messing with accessibility.
wouldn’t it be simpler to just place an outline around each and give a clean visual hierarchy to things?
Or just: