HTML5: Die <details> und <summary> Tags

Es gibt in HTML5 zwei neue Tags, die noch weniger bekannt aber sehr nützlich sind: die Details und Summary Tags. Mit diesen neuen Tags kann man einige lange Inhalte verstecken und nur eine Zusammenfassung zeigen bis der Benutzer die Details einblendet. Es wird zum Beispiel oft bei Produktbeschreibungen verwendet.

Solche Elemente kann man schon lang mit JavaScript bzw. jQuery implementieren. Hier ein Beispiel mit jQuery:

Zuerst der HTML-Code: Wir haben zwei Details-Div-Tags mit jeweils einen Summary-Div-Tag und zwei Absätze, die die eigentliche Details enthalten.

<div class='details'>
    <div class='summary'>Summary 1</div>
    <p>Details 1.1</p>
    <p>Details 1.2</p>
</div>
<div class='details'>
    <div class='summary'>Summary 2</div>
    <p>Details 2.1</p>
    <p>Details 2.2</p>
</div>

Wenn man auf einem Summary-Div-Tag klickt, muss die Absätze im selben Details-Div-Tag ein- bzw. ausgeblendet werden. Am Anfang sollen diese Absätze alle ausgeblendet werden.

Das man mann alles mit ein paar Zeilen jQuery-Code:

$('.summary').click(function(){
    $(this).parent('.details').children('p').slideToggle();
});
$('.details p').hide();

Der Code in JSFiddle:

Es ist eigentlich nicht besonders kompliziert. Es wird aber mit den zwei neuen HTML5-Tags noch einfacher.

Die Konvertierung nach HTML5 ist ganz einfach:

<details>
    <summary>Summary 1</summary>
    <p>Details 1.1</p>
    <p>Details 1.2</p>
</details>
<details>
    <summary>Summary 2</summary>
    <p>Details 2.1</p>
    <p>Details 2.2</p>
</details>

Und man braucht kein JavaScript mehr !

Wenn ein von den Details-Elementen von Anfang an, offen angezeigt werden soll, kann man einen Attribut „open“ einfügen:

<details open>

Wer den Pfeil beim Summary nicht mag, kann ihn in Webkit-Browsers (also Safari und Chrome) mit folgendem CSS ausblenden:

summary::-webkit-details-marker {
    display:none;
}

Falls es analog im Standard und bei anderen Browser implementiert, könnte man auch gleich alle folgende gleich berücksichtigen:

summary::-webkit-details-marker,
summary::-moz-details-marker,
summary::-ms-details-marker,
summary::-o-details-marker,
summary::details-marker {
    display:none;
}

Somit kann man auch den Pfeil durch ein Plus-Zeichen ersetzen:

details summary:after {
    content: "+";
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

Und wenn man auch will, dass Plus-Zeichen durch ein Minus-Zeichen ersetzt wird, wenn die Details offen sind:

details[open] summary:after { 
    content: "-";
}

Leider werden diese zwei neue Tags nicht von allen Browser unterstützt. Zur Zeit gibt es kein Support in Internet-Explorer, Firefox und Opera-Mini. Die Unterstützung in mobilen Browsers ist somit schon gesichert.

Wer auch Desktop-Browsers unterstützen will aber trotzdem nicht auf diese zwei Tags verzichten will, verwendet den jQuery-Plugin jquery-details. Man muss einfach die Datei anbinden und folgendes ausführen:

$('details').details();

Der Plugin wird somit den Browser-Support ermitteln und, wenn notwendig, die neue Tags mit jQuery anpassen.

Man kann auch dasselbe mit Details-Polyfill, jquery.details, Element.details or jquery-deets erreichen. Es fehlt also nicht an Möglichkeiten diese neue Tags einzusetzen und trotzdem eine Ausweichlösung für Browsers zu haben, die sie noch nicht unterstützen.

31. Juli 2013

HTML5