One thing that can be just a smidge funky about the
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:
What text here is inside a and what isn’t?
The solution is… CSS. Style the
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 is opened, it’s still possible. Using an alpha-transparent fill, you can even make sure that deeper-nested remain clear.
For
that you just slug into inline content (like a “spoiler” UI or something) I like the idea of some kind of border or background showing where the content ends. Nice for nested details as well.@CodePenhttps://t.co/1aVadri1Cipic.twitter.com/jIvUquIbbw