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.

Coronacharityshop.png

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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • HTML5
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

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.

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.

Beispiel ansehen …
<!doctype html> <details> <summary> Update News: </summary> <p> Das neue <details>-Element ermöglicht es, ganz ohne den Einsatz von JavaScript, ursprünglich verborgene Textinhalte aufzuklappen. </p> </details>

Ü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.

Screenshot des details-Elements

Beachten Sie: Wenn kein Summary-Element verwendet wird, zeigt der Browser den Text Details an. In Firefox ist das Dreieck dann nur im geöffneten Zustand sichtbar.

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:

Einbindung von open
<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>


CSS-Formatierung für open
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.

  • Chrome
  • Leer
  • Leer
  • Opera
  • Safari

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:

CSS-Formatierung des details-Symbols ansehen …
summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: "+"; /* Verwendung des "plus"-Symbols anstelle des Dreiecks */
  color: green;
  margin-right: 5px;
}
Beachten Sie: Diese Formatierung mit -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]

  1. html5doctor: The details and summary elements #styling
  2. developer.microsoft.com details summary
  3. Mathias Bynens details polyfill mit jQuery
  4. smashingmagazine: Making A Complete Polyfill For The HTML5 Details Element
  5. wordpress.org: HTML5 Details Polyfill

Siehe auch[Bearbeiten]