details - passendes Element für content?

[Matthias Scharwies]

Servus!

Hab grad nen Artikel auf css-tricks gelesen, der sich um details dreht.

https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

Der hat wohl noch nie vom Geschwisterselektor E ~ F und von CSS-animations gelesen.

tldr;

Welches Element würdet ihr für den Inhalt nehmen? Gibt es evtl. so etwas wie role="content"?

<details>
  <summary>Summary of the accordion</summary>
  <div class="content">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae!
      At animi modi dignissimos corrupti placeat voluptatum!
    </p>
  </div>
</details>

Herzliche Grüße

Matthias Scharwies

[Rolf B]

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?

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

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.

Rolf

[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

[Rolf B]

Hallo Matthias,

Eben grad ausprobiert:

Ich auch. In Chrome wirkungslos. Gerade im Fuchs nachgetestet: Aha, funktioniert! 😕

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Eben grad ausprobiert:

Ich auch. In Chrome wirkungslos. Gerade im Fuchs nachgetestet: Aha, funktioniert! 😕

Ohne JavaScript:

details p {
  overflow: hidden;}

details[open] p {
  animation: sliding 1s forwards; 
  border: thin solid;  
}

@keyframes sliding {
  0% {
    height: 0;
  }  

  100% {
    height: 200px;	
  }
}

Leider geht's nicht mit min-content; da muss ich noch schauen, wie man das hinbasteln kann.

Auch details p {animation: sliding 1s reverse; ..}geht nicht.

[EDIT]

grad im Netz gefunden: Der Inhalt von details p verschwindet sofort, aber die Höhe des details-Elements kann einen weichen Übergang kriegen:

details {  
  height: 2em;
	transition: all 0.6s;
}

details[open] {
  transition: all 0.6s;
  height: 300px;
}

Geht aber wohl nur mit festen Werten? 😟

[[/EDIT]]

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Rolf B,

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).

Ich glaube, diese Rolle ist jedem div innewohnend.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

da war ich mir nicht so sicher, ob no corresponding role und role="none"/"presentation" das gleiche meinen und sind. Sind sie?

Rolf

[JürgenB]

Hallo

https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

bei meinem alten iPhone6 passiert da fast nichts, nur der Pfeil zeigt nach unten. Ein Beispiel, wie man für eine Spielerei wichtige Besucher^[1] aussperrt 😟

Gruß
Jürgen

---

1. mich 😀 ↩︎

[Matthias Scharwies]

Servus!

Hallo

https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

bei meinem alten iPhone6 passiert da fast nichts, nur der Pfeil zeigt nach unten.

Das hat mich gestern Abend geschockt, dass vieles im Chrome (und seinen Knechten Edge und Opera) noch gar nicht geht.

Laut Caniuse ist das ::marker-Element im Chrome86 unterstützt; die content-Eigenschaft wird jedoch ignoriert.

Ich habe den Artikel aktualisiert: HTML/Tutorials/details

• das Experiment mit ::marker habe ich durch Screenshots des Firefox ergänzt und mich im Weiteren auf die bewährten ::after beschränkt.

• Selbst ein Tooltip ist dabei!

• Das Akkordion mit ausschiebendem Inhalt dauert noch!

Ein Beispiel, wie man für eine Spielerei wichtige Besucher^[1] aussperrt 😟

Gruß
Jürgen

😀

Herzliche Grüße

Matthias Scharwies

---

1. mich 😀 ↩︎