Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen
Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.
Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.
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.
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 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 unterstützen das details-Element 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
