HTML details und dialog – interaktive Elemente

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.

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 animiert öffnen und schließen

Für ein weiches Öffnen und Schließen mittels CSS transition 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;
}

CSS kann eigentlich nur numerische Werte interpolieren, z. B. von width: 100px zu width: 200px;. Bei Schlüsselwörtern wie auto, max-content, min-content usw. ist die Transition – der Übergang – sprunghaft statt weich.

Weicher Übergang zu Keyword mit interpolate-size: allow-keywords

Weiche Übergänge von height: 0 zu height: auto waren bislang nicht möglich. Mit der neuen Eigenschaft interpolate-size: allow-keywords und dem neuen Pseudo-Element ::details-content geht es dann doch.

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

interpolate-size: allow-keywords ist eine neue Option von CSS Transitions/Animations, das sich auf die Interpolation (Übergangsberechnung) von Schlüsselwörtern bei Größenangaben wie width, height, max-width usw. bezieht.

element {
	transition: width 0.5s ease;
	interpolate-size: allow-keywords;
}

.element.open {
	width: max-content;
}

interpolate-size wirkt auf auto, min-content, max-content, fit-content.

::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 ist gerade erst im CSS angekommen und ist in allen modernen Browsern außer in Firefox schon eingebaut. ::details-content spricht den erweiterbaren/zusammenklappbaren Inhalt eines <details>-Elements an.

Goldener Schnitt

Der goldene Schnitt bezeichnet das Teilungsverhältnis einer Strecke oder anderen Größe, bei dem das Verhältnis des Ganzen zu seinem größeren Teil dem des größeren Teils zum kleineren Teil entspricht.

Euklid

Die 13 Bücher der Elemente, in denen Euklid wunderbare Wahrheiten zur Geometrie und Zahlentheorie darlegt, hatten einen unschätzbaren Einfluss auf die Zivilisation.

Trigonometrie

Die Trigonometrie untersucht die Beziehung zwischen den Winkeln und Seitenlängen eines Dreiecks und ist für die moderne Wissenschaft von zentraler Bedeutung.

<details name="details">
	<summary>Goldener Schnitt</summary>
	<div class="content" >
		<img src="goldener-schnitt.svg" width="1294" height="1544">
		<p>Der goldene Schnitt bezeichnet das …</p>
	</div>
</details>
<details name="details">
	<summary>Euklid</summary>
	<div class="content">
		<img src="euklid.svg" width="1294" height="1544">
		<p>Die 13 Bücher der Elemente, in denen …</p>
	</div>
</details>
<details name="details">
	<summary>Trigonometrie</summary>
	<div class="content">
		<img src="trigonometrie.svg" width="1294" height="1544">
		<p>Die Trigonometrie untersucht die Beziehung …</p>
	</div>
</details>

Das HTML-name-Attribut wirkt nicht nur in Formularen bei radio-Buttons. Auch in details sorgt es dafür, dass nur immer ein details-Element geöffnet ist.

:root {
	interpolate-size: allow-keywords;
}

.accordion details {
  transition: height 0.5s ease;
}

.accordion details[open] {
	height: auto; /** ging früher nicht, erst mit interpolate-size: allow-keywords; **/
	/** height: 270px;  **/
}

::details-content {
	opacity: 0;
	transition: opacity 1000ms, content-visibility 600ms allow-discrete;
}
details[open]::details-content {
    opacity: 1;
}

Das animierte Auf- und Zuklappen des Details-Akkordeons ist in Chrome und Edge angekommen. Firefox und Safari unterstützen interpolation-size noch nicht.

Unterschied zwischen details und dialog?

HTML details öffnet zusätzliche Informationen mit einem Klick, ganz ohne Javascript.

Das HTML dialog-Element ist für modale und nicht modale Dialogfenster wie Pop-ups, Fehlermeldungen, Formulare oder Bestätigungsfelder, die sich mit etwas JavaScript öffnen und schließen lassen.