HTML details und dialog

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 (Chevron) als Zeichen, dass weitere Informationen vorhanden sind.

Das summary-Tag ist der sichtbare Kopf – die Überschrift des details-Tag und zeigt bzw. verbirgt die Details.

Neue HTML-Tags – details

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 { display: block}
   …
<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.

dialog-Tag

Für viele Aufgaben öffnen Webseiten modale Fenster mit Hilfe von Javascript und CSS. dialog hingegen erzeugt ein Popup oder modales Fenster innerhalb des Browserfensters anstelle eines neuen Fensters. Diese Dialogfenster verbessert die Benutzeroberfläche für mobile Geräte / Touchscreens und bleibt ein Teil des DOM.

Alle modernen Browser.

November

Savarin

Browser, die dialog nicht unterstützen, zeigen den Inhalt von dialog offen an. Ob nun ein Browser dialog unterstützt oder nicht – dank einiger Zeilen Javascript öffnen alle Browser das dialog-Element. Chrome, Edge, Firefox und Opera zeigen das Dialog-Element in einem schwarzen Rahmen als Overlay über dem folgenden Inhalt, ohne den folgenden Inhalt zu verdrängen. Ohne dialog-Unterstützung zeigen die Browser einfach den Inhalt und schieben den folgenden Inhalt nach unten.

Das Dialog-Fenster kann mit CSS aufbereitet werden.