details und summary
HTML details umschließt ein Detail oder Informationen, die der Benutzer einsehen oder verbergen kann – ein Klappmenü. Browser, die details unterstützen, zeigen ein Dreieck (Marker) als Zeichen, dass weitere Informationen vorhanden sind.
Das summary-Tag ist der sichtbare Kopf – die Zusammenfassung oder Überschrift des details-Elements –, der auf den Klick oder Touch reagiert und weitere Informationen freigibt.
HTML – details-Tag
Informationen, die der Benutzer aufklapen kann
HTML details- und summary-Elemente sind für kleine Zusammenfassungen gedacht, die der Benutzer anzeigen oder verbergen kann.
details hat ein individuelles HTML-Attribut: open gibt an, ob details geöffnet oder geschlossen an den Benutzer übertragen wird. Mit dem open-Attribut weist details den Browser an, den Inhalt zunächst geöffnet zu zeigen und dem Benutzer eine Chance zu geben, das details-Tag zu schließen
<details>
<summary>Neue HTML-Tags – details</summary>
<p>Informationen, die der Benutzer aufklapen kann</p>
<p>section</p>
<p>header</p>
<p>footer</p>
</details>
details und summary werden von allen modernen Browsern unterstützt (nicht IE). Browser, die details nicht unterstützen, zeigen den details-Bereich geöffnet an. Aber Achtung! Wenn die Webseite gedruckt oder als PDF gespeichert wird, bleibt das details-Element geschlossen.
details weich und sanft öffnen
Für ein weiches Öffnen und Schließen mittels CSS transition-Eigenschaft braucht das details-Elements eine Höhe. Das macht das details-Element weniger flexibel.
details#smooth { height: 20px; }
details#smooth[open] { height: 120px; }
details[open] {padding-bottom: 30px;}
details#smooth, details#smooth .content {
transition: height 0.6s ease-in-out;
}
Details weich öffnen
Der Nachteil des weichen Öffnens: Die Höhe des Inhalts muss im Vorhinein bekannt sein*.
::details-content
Dieser Browser unterstützt ::details-content noch nicht. Diese Codebeispiel funktioniert hier nicht. Wie diese Demo aussehen sollte, finden Sie mit Chrome heraus.
Das Pseudo-Element ::details-content kommt gerade erst im CSS an und ist bislang nur in Chrome und Edge sowie in Safari Technology Preview implementiert.
Weiche Übergänge von height: 0 zu * height: auto; waren bislang gar nicht möglich. Mit der neuen Eigenschaft interpolate-size: allow-keywords und dem neuen Pseudo-Element ::details-content geht es dann doch (bald).
:root {
interpolate-size: allow-keywords;
}
Der Übergang zu bestimmten Größenwerten wie auto, max-content und min-content konnte bislang nicht animiert werden. Erst mit interpolate-size: allow-keywords können die Browser auch zu Schlüsselwörtern hin interpolieren.
Item 1
Nemo enim ipsam voluptatem quia voluptas sit aspernatur.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore .
Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Item 3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Item 4
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio.
Noch ist das animierte Auf- und Zuklappen des Details-Akkordeons Chrome und Edge vorbehalten. Safari und Firefox unterstützen interpolation-size noch nicht.
dialog-Tag
Das dialog-Element erzeugt ein modales Dialogfenster für Nachrichten, Warnungen oder für die Interaktion mit dem Benutzer. Ein »modales Fenster« ist ein Popup oder Overlay und wirkt, als wäre das Fenster absolut positioniert. Der nachfolgende Inhalt bleibt an seinem Platz, der Inhalt des dialog-Elements legt sich über die vertikale und horizontale Mitte des Browserfensters und verdrängt nachfolgenden Inhalte nicht.
<button id="openBtn">Es gibt neue Nachrichten!</button> <dialog> <p>Das dialog-Element …</p> <button id="closeBtn">Schließen</button> </dialog>
Per Vorgabe zeigen die Browser das Dialog-Element in einem schwarzen Rahmen. Ohne dialog-Unterstützung zeigen die Browser einfach den Inhalt und schieben den folgenden Inhalt nach unten.
Das Skript ist kurz und einfach. JavaScript showModal() öffnet das dialog-Element, close() schließt es.
<script>
const dialog = document.querySelector('dialog');
const open = document.getElementById('openBtn');
const close = document.getElementById('closeBtn');
open.addEventListener('click', () => {
dialog.showModal();
});
close.addEventListener('click', () => {
dialog.close();
});
</script>
Der Benutzer kann zwar noch scrollen, aber nicht mehr mit anderen interaktiven Elementen interagieren.
Alternativ zu showModal() würde JavaScript show() das dialog-Element zwar ebenfalls öffnen und bis zu einem Klick auf den Schließen-Button geöffnet halten, aber das dialog-Fenster mitbewegt, wenn die Seite gescrollt wird, und andere interaktive Elemente behalten ihre Funktion.
