<summary>: Das Disclosure Summary-Element

Dieses Element enthält nur die globalen Attribute.

Der Inhalt des <summary>-Elements kann jeder Überschrift-Inhalt, reiner Text oder HTML sein, das innerhalb eines Absatzes verwendet werden kann.

Ein <summary>-Element darf nur als erstes 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, das verwendet werden kann, um zu erfahren, wann diese Zustandsänderung eintritt.

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

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

Gemäß der HTML-Spezifikation enthält der Standardstil für <summary>-Elemente display: list-item. Dies ermöglicht es, das Symbol, das als Offenlegungs-Widget neben dem Label angezeigt wird, zu ändern oder zu entfernen, welches normalerweise ein Dreieck ist.

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

Siehe den Abschnitt Browser-Kompatibilität für Details, da nicht alle Browser die volle Funktionalität dieses Elements unterstützen.

Für WebKit-basierte Browser wie Safari ist es möglich, die Symboldarstellung durch das nicht standardisierte CSS-Pseudoelement ::-webkit-details-marker zu steuern. Um das Offenlegungsdreieck zu entfernen, verwenden Sie summary::-webkit-details-marker { display: none }.

Im Folgenden finden Sie einige Beispiele, die die Verwendung von <summary> zeigen. Weitere Beispiele finden Sie in der Dokumentation für das <details>-Element.

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

Sie können Überschrift-Elemente innerhalb von <summary> verwenden, wie hier:

<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 mithilfe von CSS behoben werden könnten.

Dieses Beispiel fügt dem <summary>-Element einige Semantik hinzu, 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

Das Marker-Symbol des <summary>-Elements, das Offenlegungsdreieck, kann mit CSS angepasst werden. Das Symbol kann mit dem Pseudoelement ::marker gezielt angesprochen werden, das die list-style-Kurzform und ihre Langform-Komponenten wie list-style-type akzeptiert. Dies ermöglicht es, das Dreieck in ein Bild (normalerweise mit list-style-image) oder eine Zeichenkette (einschließlich Emojis) zu ändern. In diesem Beispiel ersetzen wir das Icon eines Offenlegungs-Widgets und entfernen das Icon von einem anderen, indem wir list-style: none setzen, bevor wir ein benutzerdefiniertes Offenlegungsicon über generierten Inhalt hinzufügen.

CSS

Im ersten Offenlegungs-Widget formatieren 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 stilisierten generierten Inhalt mit dem Pseudoelement ::after hinzu. Wir fügen auch Stile für ::-webkit-details-marker hinzu, um Safari anzusprechen. Der Selektor für das browserspezifische Pseudoelement ist in einer :is()-Pseudoklasse enthalten, damit der Selektorblock nicht ungültig wird, falls das vorgefixte Pseudoelement in einem Browser ungültig ist. Wir haben auch CSS Nesting verwendet. Siehe das CSS Selektor-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

• <details>