Eine Sache, die bei dem <details>-Element ein klein wenig seltsam sein kann, ist, dass es, wenn es geöffnet ist, nicht immer zu 100 % klar ist, was in diesem Element enthalten ist und was nicht. Ich sage nicht, dass das *immer* wichtig ist oder dass es ein besonders schwer zu lösendes Problem ist, ich bemerke es nur, weil es mir kürzlich aufgefallen ist.
Hier ist ein visuelles Beispiel
<details> und welcher nicht?Die Lösung ist... CSS. Stylen Sie das <details> etwas einzigartig, und dieses Problem ist behoben. Selbst wenn die Typografie gleich sein soll oder Sie keine exklusive Formatierung wünschen, bis das <details> geöffnet ist, ist es immer noch möglich. Mit einer alpha-transparenten Füllung können Sie sogar sicherstellen, dass tiefer verschachtelte <details> klar bleiben.
Hier ist das CSS
details[open] {
--bg: rgb(0 0 0 / 0.2);
background: var(--bg);
outline: 1rem solid var(--bg);
margin: 0 0 2rem 0;
}Und die Demo
Ich habe angefangen, das Details- und Summary-Tag für Akkordeons zu verwenden, und das macht alles einfach, außer für Safari, das immer seltsame Dinge erstellt, und fangen Sie gar nicht erst mit dem Marker an, es ist das Einzige, das verrückte Dinge tut. Gibt es hier schon einen Beitrag, der über die vollständige Gestaltung dieser Komponenten spricht?
Die Gestaltung ist im Moment etwas knifflig. Aber Greg Gibson hat einen schönen Beitrag mit einigen Techniken, ebenso wie Chris in diesem hier.
hmmm, ich bin mir nicht sicher, ob mir die Opazität gefällt, die die Barrierefreiheit beeinträchtigt.
wäre es nicht einfacher, einfach eine Umrandung um jedes Element zu legen und eine klare visuelle Hierarchie zu schaffen?
https://codepen.io/mikegleeson/pen/eYvPbre
Oder einfach