details - passendes Element für content?

[Matthias Scharwies]

Servus!

Hallo Matthias,

meiner unbescheidenen Meinung nach hat das div nur den Zweck, Ränder zu erzeugen. Dafür wäre role="presentation" angemessen (auch als "none" bekannt).

Am liebsten würde ich das div ja eliminieren. Die Ränder kann man auch auf dem Details-Element definieren, und das Padding auf Margins der inneren Elemente übertragen. Das hat nur den Schönheitsfehler, dass die Ränder dann auch die <summary> einschließen. D.h. ich habe den Outline-Rahmen um die summary und außerhalb davon noch die Ränder. Meine Korrekturversuche haben es nur schlimmer gemacht. D.h. das div ist wohl nötig. Oder ein CSS Guru.

Das <details> Element bringt bereits role="group" mit, da könnte man auch role="figure" setzen. Ein <figure> Element an Stelle des <div> stelle ich mir problematisch vor, ich wüsste nicht, wie man da sinnvoll die <figcaption> anordnet.

Der hat wohl noch nie vom Geschwisterselektor E ~ F ... gelesen.

Wo hätte er den verwenden können?

Mist: details > div mit summary ~ div verwechselt

Der hat wohl noch nie ... von CSS-animations gelesen.

Eben grad ausprobiert:

details p {height: 0px; transition: all .5s:; overflow: hidden;}

details[open] p {height: 100px; transition: all .5s}

Muss aber noch schöner werden!

Er verwendet WAAPI. Das ist ein API für CSS Animation. Er hätte vermutlich auch via style die animation-Eigenschaft setzen können. Das wäre aber auch nicht viel einfacher, wenn überhaupt, denn das Öffnen eines <details> ist per se nicht animierbar. Der CSS Trick fummelt sich da drumherum.

Ja, weiß ich. Aber ich würde die WAAPI zum Steuern von Animationen verwenden, nicht für so einen Klick - außerdem gibt es nur 2 Zustände, da 4 oder 5 Funktionen dafür schreiben?

Herzliche Grüße

Matthias Scharwies