Vorweg gesagt: es hat einen guten Grund, warum summary und details Tags weder in gleichem Maß bekannt sind noch genutzt werden wie z.B. header und footer. Bislang sind sie nicht über den Status eines Drafts hinaus gekommen. Es kann sich in der weiteren Spezifikation noch etwas ändern, was auch die Zurückhaltung bei der Umsetzung durch Browserhersteller erklärt.
Eine übersichtliche Einführung zu summary/details findet sich unter QuackIt, aus dem wir für die folgenden Erläuterungen kurzerhand das Beispiel übernehmen:
<details>
<summary>Name</summary>
<p>Homer J Simpson</p>
</details>
<a href="http://www.quackit.com/html_5/tags/html_summary_tag.cfm">Quelle: QuackIt</a>
Innerhalb des details Elements gibt es zum einen den Kurztext summary und ein weiteres Element mit beliebig viel Inhalt. Gedacht ist dieses Konstrukt für Webseiten, die beim Laden aus Platz-, Layout- oder sonstigen Gründen nur einen kurzen Anreissertext wie z.B. eine Überschrift anzeigen wollen. Damit der Leser den gesamten Text lesen kann, bedarf es eines Klicks auf den Anreisser. Denkbar wäre das als Ersatz für ein Accordion, z.B. bei der Anzeige der Diskographie einer Band oder bei der Vita eines Blogautors.
Im Unterschied zum Accordion bedarf es in Zukunft keines JavaScripts mehr. Der Browser soll dieses semantisch eindeutige Konstrukt nativ unterstützen - ganz wie neue input Typen.
Wenn Sie obiges Beispiel in eine HTML Datei kopieren und ausführen, werden Sie in vielen Fällen nichts von der beschriebenen Funktionalität zu sehen bekommen. Standardmäßig werden sowohl Inhalt des summary als auch das p Tags angezeigt, beim Klicken auf "Name" geschieht nichts. Gemäß Auflistung unter Can I Use ist Google Chrome ab Version 12 der einzige Mainstream-Browser mit Support, der optisch sofort durch einen Pfeil vor der summary deutlich wird, der so nicht im HTML Code auftaucht.
Um den gleichen Effekt in den übrigen größen Browsern zu erreichen, bedarf es allerdings nur einer kleinen Anpassung am Source-Code. Ziel muss sein, die native Unterstützung des Chrome so zu erhalten wie sie ist. Die folgende Implementierung muss demnach zwei Aufgaben erfüllen:
- Erkennen, ob Chrome der aktuelle Browser ist
- Funktionalität nachrüsten, wenn die erste Bedingung nicht zutrifft.
Leider unterstützt modernizr das summary/details noch nicht, so dass wir auf andere Hilfsmittel angewiesen sind. CSS und jQuery reichen dafür theoretisch vollkommen aus. Um komfortabel den Browsertyp auszulesen, nehmen wir noch CSS User Agent hinzu. Wir erweitern unser HTML oberhalb des </body> also um folgendes:
<script type="text/javascript" src="cssua.min.js"></script>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
Das gibt uns Zugriff auf das cssua Objekt in JavaScript. Sofern ein Leser mit dem Google Chrome Browser ab Version 12 auf unsere Seite kommt, haben wir nichts zu tun. Dann greift nämlich die native Unterstützung des summary Tags. Andererseits müssen wir per jQuery dafür Sorge tragen, dass das p Tag ein- bzw. ausgeblendet wird. Das erreichen wir mit folgendem JavaScript-Schnipsel:
$(function() {
if (typeof cssua.userAgent.chrome === "undefined" || cssua.userAgent.chrome < "12") {
$("summary").click(function(){
$(this).toggleClass("minified");
$(this).siblings("p").fadeToggle("fast", "linear");
});
}
});Das toggleClass hat eigentlich wenig mit der Funktionalität zu tun. Wir haben es lediglich eingefügt, um der Optik nachzuhelfen. Mit etwas CSS können wir nämlich in Abhängigkeit davon, ob die Details ein- oder ausgeblendet sind, vor der summary einen Pfeil nach rechts oder unten anzeigen. Der Code sieht wie folgt aus:
html:not(.ua-chrome) summary:before { content:"v "; }
html:not(.ua-chrome) summary.minified:before { content:"> "; }
p { width: 200px; background-color: #cccccc; }
Wannimmer die Details eingeblendet sind, erscheint damit vor der Summary ein Pfeil nach unten, in unserem Beispiel angedeutet durch ein V. Stattdessen ist bei ausgeblendeten Details ein Pfeil nach rechts zu sehen, dargestellt als schließende spitze Klammer (>). Selbstverständlich könnte man diese Zeichen leicht durch hübsche austauschen, das überlassen wir aber den geneigten Programmierer.
Das ganze Beispiel am Stück liest sich wie folgt:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Summary in all Browsers</title>
<style type="text/css">
html:not(.ua-chrome) summary:before { content:"v "; }
html:not(.ua-chrome) summary.minified:before { content:"> "; }
p { width: 200px; background-color: #cccccc; }
</style>
</head>
<body>
<details>
<summary>Name (eingeklappt)</summary>
<p>Homer J Simpson</p>
</details>
<a href="http://www.quackit.com/html_5/tags/html_summary_tag.cfm">Quelle: QuackIt</a>
<script type="text/javascript" src="cssua.min.js"></script>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function() {
if (typeof cssua.userAgent.chrome === "undefined" || cssua.userAgent.chrome < "12") {
$("summary").click(function(){
$(this).toggleClass("minified");
$(this).siblings("p").fadeToggle("fast", "linear");
});
}
});
</script>
</body>
</html>
