<summary>: Das Offene-Element-Zusammenfassung

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 enthält nur die globalen Attribute.

Verwendungshinweise

Die Inhalte des <summary>-Elements können beliebige Überschrift-Inhalte, einfacher Text oder HTML sein, das innerhalb eines Absatzes verwendet werden kann.

Ein <summary>-Element darf nur als das erste Kind eines <details>-Elements verwendet werden. Wenn der Benutzer auf die Zusammenfassung klickt, wird das übergeordnete <details>-Element geöffnet oder geschlossen, und es wird ein toggle-Ereignis an das <details>-Element gesendet, mit dem Sie informiert werden können, wann diese Zustandsänderung eintritt.

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

Standard-Label-Text

Wenn das erste Kind eines <details>-Elements kein <summary>-Element ist, wird der Benutzeragent eine Standardzeichenfolge (typischerweise "Details") als Label für die Offenlegungsbox verwenden.

Standardstil

Laut HTML-Spezifikation umfasst der Standardstil für <summary>-Elemente display: list-item. Dadurch ist es möglich, das Symbol, das als Offenlegungs-Widget neben dem Label angezeigt wird, zu ändern oder zu entfernen. Standardmäßig ist dies typischerweise ein Dreieck.

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

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

Für auf WebKit basierende Browser wie Safari ist es möglich, die Anzeige des Symbols über das nicht standardmäßige CSS-Pseudo-Element ::-webkit-details-marker zu steuern. Um das Offenlegungsdreieck zu entfernen, verwenden Sie summary::-webkit-details-marker { display: none }.

Beispiele

Nachfolgend sind einige Beispiele für die Verwendung von <summary> aufgeführt. Weitere Beispiele finden Sie in der Dokumentation zum <details>-Element.

Einfaches Beispiel

Ein einfaches Beispiel, das die Verwendung von <summary> in einem <details>-Element zeigt:

<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 Überschrift-Elemente in <summary> verwenden, 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 gibt es einige Abstandsprobleme, die mit CSS behoben werden könnten.

HTML in Zusammenfassungen

In diesem Beispiel werden dem <summary>-Element einige Semantiken hinzugefügt, um das Label 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

Ändern des Symbols der Zusammenfassung

Das Marker-Symbol des <summary>-Elements, das Offenlegungsdreieck, kann mit CSS angepasst werden. Der Marker kann über das ::marker-Pseudo-Element angesprochen werden, das die list-style-Kurzschreibweise und seine Langhandkomponenten-Eigenschaften wie list-style-type akzeptiert. Dies ermöglicht es, das Dreieck zu einem Bild (normalerweise mit list-style-image) oder einer Zeichenkette (einschließlich Emojis) zu ändern. In diesem Beispiel ersetzen wir den Inhalt eines Offenlegungs-Widgets und entfernen das Symbol von einem anderen, indem wir list-style: none vor dem Hinzufügen eines benutzerdefinierten Offenlegungssymbols über generierte Inhalte setzen.

CSS

Im ersten Offenlegungs-Widget stylen wir den ::marker, indem wir den content basierend auf dem [open]-Attribut des <details>-Elements ändern. Für das zweite Widget entfernen wir den Marker mit list-style-Eigenschaften und fügen dann formatierte generierte Inhalte mit dem ::after-Pseudo-Element hinzu. Wir fügen auch Stile für ::-webkit-details-marker ein, um Safari anzusprechen. Der Selektor für das browserspezifische Pseudo-Element ist in einer :is()-Pseudo-Klasse enthalten, sodass der Selektorblock nicht ungültig wird, wenn das Pseudo-Element in einem Browser ungültig ist. Wir haben auch CSS Verschachtelung verwendet. Sehen Sie das CSS-Selektoren-Modul.

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>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <details>