1177150

Die HTML5-Elemente "details" und "summary"

12.08.2011 | 12:58 Uhr |

HTML 5 soll in der nächsten Zukunft fertig sein - das erzählt man sich jedenfalls. Jene die dies verbreiten, verzichten meist darauf, "fertig" näher zu definieren. Fakt ist nämlich: Viele Aspekte von HTML5 kann man heute schon verwenden.

Web-Standard HTML5
Vergrößern Web-Standard HTML5

Die Elemente < details > und < summary > gehören zu den wenigen HTML5-Neuheiten, mit denen sich auch ganz ohne JavaScript etwas spürbar neues in den Browser bringen lässt. Die Spezifikationen lassen uns wissen:

The details element represents a disclosure widget from which the user can obtain additional information or controls […] The first summary element child of the element, if any, represents the summary or legend of the details. […] The rest of the element’s contents represents the additional information or controls.

Anders ausgedrückt wird der Inhalt eines <details>- Elements vor dem Benutzer so lange versteckt, bis der Surfer das im <details>- Element befindliche <summary>- Element anklickt oder anderweitig (z.B. via Tastaturnavigation) aktiviert. Als Inhalt gilt dabei alles bis auf das erste <summary>- Element - dieses bleibt immer sichtbar. Die beiden neuen Elemente bilden also zusammen ein interaktives Paket.

Nützlich kann dies zum Beispiel für das Verstecken von optionalen Interface-Elementen sein, die nicht ständig im Blickfeld des Nutzers sein müssen wie die Steuerung eines Videoplayers, Statusanzeigen oder Konfigurationsoptionen einer Webapp:

<video id="film" width="320" height="180" autoplay>

<source src="video.mp4" type="video/mp4">

<source src="video.webm" type="video/webm">

<source src="video.ogv" type="video/ogg">

</video>

<details>

<summary>Videosteuerung ein/ausblenden</summary>

<p>

<button id="start" onclick="start()">Start/Pause</button>

<button id="stumm" onclick="stumm()">Stummschalten</button>

<button id="lauter" onclick="lauter()">Lauter</button>

<button id="leiser" onclick="leiser()">Leiser</button>

</p>

</details>

In Browsern mit Unterstützung für <details> und <summary> (bislang nur in der aktuellen Version von Chrome ) werden die Buttons erst sichtbar, nachdem man das <summary>- Element angeklickt hat:

Wird kein <summary>- Element in dem <details>- Element gefunden, soll der Browser selbst eine <summary> mit einem Standardtext einfügen. Fügt man das open-Attribut ein (boolsches Attribut, in XHTML open="open", sonst einfach nur open), ist der Inhalt des <details>- Elements zu Beginn sichtbar. Chrome verhält sich auch bereits rundum standardkonform und implementiert sogar die korrekten User-Agent-Stylesheets.

In modernen Webapplikationen kann man die Funktionalität von <details> und <summary> sicher häufig gebrauchen, so dass man die Einführung der beiden neuen Elemente durchaus gutheißen kann - auch wenn man das Verhalten der beiden Neulinge mit wenigen Zeilen JavaScript nachbauen könnte. Die Unterscheide zwischen der <details>-<summary>- Kombination und einer JavaScript-Lösung sind im Einzelnen:

  • auch wenn die JavaScript-Lösung recht trivial wäre, sind und noch einfacher einzubauen und über das open-Attribut zu steuern;

  • und funktionieren auch bei abgeschaltetem JavaScript;

  • und lasen sich nicht anpassen, Animationen und andere interaktive Elemente sind nicht vorgesehen;

  • das Element scheint zur Zeit noch nicht tastaturtauglich zu sein, weder lies es sich bei unseren Tests mit der Tabulatortaste noch über andere Tastenkombinationen steuern;

Angesichts der mangelnden Anpassbarkeit ist es bislang nicht klar, ob sich <details> und <summary> außerhalb von Prototypen (wo die einfache Umsetzung von Vorteil ist) wirklich in naher Zukunft durchsetzen werden. Hinzu kommt die zur Zeit sehr sparsame Unterstützung der Browser. Zwar muss man einen JavaScript-Ersatz für die beiden Elemente noch programmieren, aber wenn man einen solchen Ersatz hat, der tastaturfreundlich und ansprechend animiert ist, braucht man dann noch die Original-Elemente <details> und <summary> ?

0 Kommentare zu diesem Artikel
1177150