SELFHTML ist in diesem Jahr Medienpartner der IJC.
Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.
Weitere Informationen finden sich im SELFHTML-Forum.
HTML/Interaktiv/details
Das details-Element ermöglicht es, Seiteninhalte zu verstecken und mit einem Klick auf summary aufzuklappen. Dieses Verhalten wird oft als "Akkordeon" bezeichnet, vor allem wenn mehrere solcher aufklappbarer Elemente vorhanden sind.
- 49
Details: caniuse.com
Früher konnte ein solches Akkordeon nur mit vielen Zeilen JavaScript realisiert werden. Dabei wurde jedoch oft auf eine Bedienbarkeit mit der Tastatur keine Rücksicht genommen. Das details-Element bietet nun eine zugängliche und einfache Alternative.
Der Internet Explorer und ältere Versionen des Firefox stellen das details-Element mit seinem Inhalt ohne Funktionalität in einer Zeile dar. Im Artikel JavaScript/Tutorials/zugängliches Akkordeon wird ein Polyfill für ein zugängliches Akkordeon vorgestellt.
Inhaltsverzeichnis
Akkordeon mit details[Bearbeiten]
details bezeichnet einen semantischen Abschnitt, der mit Text, Bildern (oder einem figure-Element, einem Formular oder auch anderen details) gefüllt werden kann.
Ein Klick mit der Maus öffnet den versteckten Abschnitt. Alternativ bringt die Tab-Taste die Überschrift summary in den Fokus. Ein Klick auf Leertaste oder Enter ⏎ öffnet dann den Text.
Überschrift mit summary[Bearbeiten]
Mit summary können Sie dem Akkordeon eine Überschrift geben. Links daneben ein wird ein details-marker-Pseudoelement in Form eines schwarzen Dreiecks angezeigt. Es verändert bei einer Zustandsänderung seine Richtung.
open[Bearbeiten]
Mit dem Klick auf die summary wird details das Attribut open angehängt. Um die Details direkt anzuzeigen, können Sie es auch direkt im HTML-Code notieren. Es eignet sich auch als Angriffspunkt, um das betreffende Element mit CSS zu gestalten:
<details open>
<summary>
Browser-News:
</summary>
<p>
Während Chrome, Opera und Safari das neue Element schon länger unterstützen,
ist es jetzt auch in Firefox 49 verfügbar!
</p>
</details>
details[open] {
background: coral;
margin-bottom: 1em;
}
CSS-Formatierung des details-markers[Bearbeiten]
Sie können den details-marker (das kleine schwarze Dreieck) in begrenztem Umfang formatieren.[1] Allerdings gibt es hierfür noch keinen Standard, so dass es in manchen Browsern doch anders angezeigt wird.
Da die Form des details-markers nicht direkt geändert werden kann, wird er mit display:none ausgeblendet und stattdessen ein Pseudoelement erzeugt und formatiert:
summary::-webkit-details-marker {
display: none;
}
summary:before {
content: "+"; /* Verwendung des "plus"-Symbols anstelle des Dreiecks */
color: green;
margin-right: 5px;
}
-webkit-details-marker spricht nur die Webkit-Browser Chrome, Safari und Opera an. Im Firefox 49+ wird das details-marker-Element trotzdem angezeigt.
Browserunterstützung[Bearbeiten]
Der Internet Explorer 8-11 und IE Edge unterstützen das details-Element derzeit nicht.[2] Für diesen Browser gibt es aber jQuery-Polyfills.[3][4]
Auch für WordPress wird ein polyfill angeboten.[5]
Quellen[Bearbeiten]
- ↑ html5doctor: The details and summary elements #styling
- ↑ developer.microsoft.com details summary
- ↑ Mathias Bynens details polyfill mit jQuery
- ↑ smashingmagazine: Making A Complete Polyfill For The HTML5 Details Element
- ↑ wordpress.org: HTML5 Details Polyfill
Siehe auch[Bearbeiten]
- JavaScript/Tutorials/zugängliches Akkordeon
- Referenz: details
- Referenz: summary
