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.

Making Apps Developer Days HTML 5

HTML 5 heißt das Zauberwort für alle App-Entwickler, die OS-übergreifende Apps entwickeln wollen. Die Grundlagen dafür liefert Making Apps mit einem zweitägigen Entwicklerworkshop am 13./14. September in München.

Wann: 13.-14. September 2011, 09 - 18 Uhr. Das Programm finden Sie hier.

Referenten: Peter Kröner, Jochen Grochtdreis

Wo: Skylounge, München

Preise:
Tag 1: 199 Euro (zzgl. MwSt.)
Tag 2: 599 Euro (zzgl: MwSt)
Tag 1+2: 749 Euro (zzgl. MwSt)
Early Birds buchen beide Tage im Paket für nur 699 Euro (zzgl. MwSt., Anmeldung bis zum 19.08.2011)

Weitere Infos und Anmeldung hier

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 <details> und <summary> noch einfacher einzubauen und über das open-Attribut zu steuern;

• <details> und <summary> funktionieren auch bei abgeschaltetem JavaScript;

• <details> und <summary> lasen sich nicht anpassen, Animationen und andere interaktive Elemente sind nicht vorgesehen;

• das <summary>-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>? (Macwelt/mje)