This content originally appeared on Go Make Things and was authored by Go Make Things
I’ve been obsessing over how Kelp implements the <details> element disclosure pattern for the last week or so.
This component is particularly tricky because of the many ways it’s styled in projects:
- Browser-default styles
- A unicode icon with the CSS
contentproperty - An SVG icon (with
mask,background-color,height, andwidth) - A shape drawn with CSS and animated (like a
+sign that morphs into a-symbol) - Rotations on open/close (which direction, how much, what speed?)
- Different icons entirely for open and close state
- Icon before the text vs. icon after the text (using either
::beforeor::after) - For certain icons that point in a particular direction, rotating them for RTL languages
On their own, each of these options is relatively simple and easy to implement.
But many of them are in conflict with each other, which means providing options to do all of them (not at the same time, of course) is annoying difficult.
It would require a lot of CSS variables, and make the code for that component a lot bigger, error-prone, and harder to read.
summary {
--icon-before-closed: "+";
--icon-before-open: "-";
--icon-before-font-size: 1em;
--icon-before-width: 1em;
--icon-before-height: 1em;
--icon-before-mask: "";
--icon-after-closed: "";
--icon-after-open: "";
--icon-after-font-size: 0;
--icon-after-width: 0;
--icon-after-height: 0;
--icon-after-mask: "";
--icon-color: currentColor;
--rotation-closed: none;
--rotation-open: none;
--transition: none;
}With this kind of setup, any change from the default would require setting lots of CSS variables.
Want to use an SVG instead of unicode? You need to unset the unicode icons and add your SVG…
@layer kelp.overrides {
summary {
--icon-before-closed: "";
--icon-before-open: "";
--icon-before-font-size: 0;
--icon-before-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>') center no-repeat;
--rotation-closed: transform(180deg);
}
}Given all that, the direction I’m leaning towards is shipping Kelp with mostly stock, out-of-the-box <details> and <summary>.
Then, I’ll create a “cookbook” of different style changes, with copy/paste/edit snippets you can drop right into your project.
/* Use a custom Unicode icon */
@layer kelp.overrides {
summary {
--gap: var(--size-5xs);
display: flex;
align-items: baseline;
gap: var(--gap);
list-style: none;
}
/* Add your preferred icon here */
summary::before {
content: "🎉" / "";
}
summary::-webkit-details-marker {
display: none;
}
}It ends up being the same amount of work/custom code (maybe even less!) for you, but keeps the core code base simpler and easier to read. And you maybe even understand your code a little better, too, because it’s less of a blackbox.
What I’d like to know: what do you think about this approach? Does it work for you? Or would you rather have a ton of CSS variables to use instead?
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-08-06T14:30:00+00:00) Sweating the details. Retrieved from https://www.scien.cx/2025/08/06/sweating-the-details/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.