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
  • Firefox 4949
  • Leer
  • 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 ein 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:

Beispiel: 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>


Beispiel: 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:

Beispiel: 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 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]

  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]