HTML-Element <summary> für die Zusammenfassung eines aufklappbaren Bereichs

Probieren Sie es aus

<details>
  <summary>
    I have keys but no doors. I have space but no room. You can enter but can't
    leave. What am I?
  </summary>
  A keyboard.
</details>

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

Attribute

Dieses Element unterstützt nur die globalen Attribute.

Verwendungshinweise

Der Inhalt eines <summary>-Elements kann aus Überschriften, einfachem Text oder HTML bestehen, das innerhalb eines Absatzes verwendet werden kann.

Ein <summary>-Element darf nur als erstes Kindelement eines <details>-Elements verwendet werden. Wenn Benutzer auf die Zusammenfassung klicken, wird das übergeordnete <details>-Element geöffnet oder geschlossen. Anschließend wird ein toggle-Ereignis an das <details>-Element gesendet. Damit lässt sich erkennen, wann diese Zustandsänderung eintritt.

Der Inhalt des <details>-Elements stellt die zugängliche Beschreibung für das <summary>-Element bereit.

Standardbeschriftung

Wenn das erste Kindelement eines <details>-Elements kein <summary>-Element ist, verwendet der User Agent eine Standardzeichenfolge (in der Regel „Details“) als Beschriftung für den aufklappbaren Bereich.

Standardstil

Gemäß der HTML-Spezifikation umfasst der Standardstil für <summary>-Elemente display: list-item. Dadurch lässt sich das Symbol, das neben der Beschriftung als Aufklappindikator angezeigt wird – üblicherweise ein Dreieck –, ändern oder entfernen.

Sie können den Stil auch in display: block ändern, um das Dreieck zu entfernen.

Weitere Einzelheiten finden Sie im Abschnitt Browser-Kompatibilität, da noch nicht alle Browser die volle Funktionalität dieses Elements unterstützen.

In WebKit-basierten Browsern wie Safari lässt sich die Anzeige des Symbols über das nicht standardisierte CSS-Pseudoelement ::-webkit-details-marker steuern. Verwenden Sie summary::-webkit-details-marker { display: none }, um das Dreieck zu entfernen.

Beispiele

Die folgenden Beispiele zeigen die Verwendung von <summary>. Weitere Beispiele finden Sie in der Dokumentation zum <details>-Element.

Einfaches Beispiel

Ein einfaches Beispiel für die Verwendung von <summary> in einem <details>-Element:

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Ergebnis

Zusammenfassungen als Überschriften

Sie können Überschriftenelemente in <summary> verwenden, zum Beispiel so:

<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Ergebnis

Derzeit treten dabei einige Abstandsprobleme auf, die sich mit CSS beheben lassen.

HTML in Zusammenfassungen

In diesem Beispiel wird dem <summary>-Element zusätzliche Semantik hinzugefügt, um die Beschriftung als wichtig zu kennzeichnen:

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Ergebnis

Symbol der Zusammenfassung ändern

Der Marker des <summary>-Elements, das Dreieck zum Aufklappen, lässt sich mit CSS anpassen. Der Marker kann über das Pseudoelement ::marker angesprochen werden. Dieses unterstützt die Kurzschreibweise list-style und deren einzelne Eigenschaften, beispielsweise list-style-type. So lässt sich das Dreieck durch ein Bild (in der Regel mit list-style-image) oder eine Zeichenfolge (auch mit Emojis) ersetzen. In diesem Beispiel ersetzen wir den Inhalt eines Aufklappindikators und entfernen das Symbol eines anderen, indem wir list-style: none setzen und anschließend über generierten Inhalt ein eigenes Aufklappsymbol hinzufügen.

HTML

<h1>Quotes from Helen Keller</h1>

<details>
  <summary>On women's rights</summary>
  <p>
    <q>We have prayed, we have coaxed, we have begged, for the vote, with the
      hope that men, out of chivalry, would bestow equal rights upon women and
      take them into partnership in the affairs of the state. We hoped that
      their common sense would triumph over prejudices and stupidity. We thought
      their boasted sense of justice would overcome the errors that so often
      fetter the human spirit; but we have always gone away empty-handed. We
      shall beg no more.</q>
  </p>
</details>

<details>
  <summary>On optimism</summary>
  <p>
    <q>Optimism is the faith that leads to achievement; nothing can be done
      without hope.</q>
  </p>
</details>

CSS

Beim ersten Aufklappindikator gestalten wir ::marker und ändern content abhängig vom Attribut [open] des <details>-Elements. Beim zweiten entfernen wir den Marker mithilfe von list-style-Eigenschaften und fügen anschließend mit dem Pseudoelement ::after gestalteten generierten Inhalt hinzu. Außerdem verwenden wir Stile für ::-webkit-details-marker, um Safari zu berücksichtigen. Der Selektor für dieses browserspezifische Pseudoelement steht innerhalb der Pseudoklasse :is(), damit er die Selektorliste nicht ungültig macht.

details {
  font-size: 1rem;
  font-family: "Open Sans", "Calibri", sans-serif;
  border: solid;
  padding: 2px 6px;
  margin-bottom: 1em;
}

details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

details[open]:first-of-type summary::marker {
  content: "− ";
}

details:last-of-type summary {
  list-style: none;
  &::after {
    content: "+";
    color: white;
    background-color: darkgreen;
    border-radius: 1em;
    font-weight: bold;
    padding: 0 5px;
    margin-inline-start: 5px;
  }
  [open] &::after {
    content: "−";
  }
}
details:last-of-type summary::-webkit-details-marker {
  display: none;
}

Das CSS enthält den Attributselektor [open], der nur dann zutrifft, wenn das Attribut open vorhanden ist (also wenn das <details>-Element geöffnet ist). Die Pseudoklassen :first-of-type und :last-of-type sprechen das erste beziehungsweise das letzte Geschwisterelement desselben Typs an. Wir haben das mit -webkit- präfixierte Pseudoelement in eine :is()-Pseudoklasse eingeschlossen, da diese eine fehlertolerante Selektorliste akzeptiert. Ist das präfixierte Pseudoelement in einem Browser ungültig, wird dadurch nicht der gesamte Selektorblock ungültig. Außerdem verwenden wir CSS-Verschachtelung. Weitere Informationen finden Sie im Modul CSS-Selektoren.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <details>