<summary>: Das Element Disclosure Summary

Dieses Element schließt nur die globalen Attribute ein.

Der Inhalt des <summary> Elements kann jede Art von Überschrift, Klartext 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 ein toggle Ereignis wird an das <details> Element gesendet, das verwendet werden kann, um zu erkennen, 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 Benutzeragent eine Standardzeichenfolge (typischerweise "Details") als Beschriftung für das Offenlegungsfeld verwenden.

Laut HTML-Spezifikation umfasst der Standardstil für <summary> Elemente display: list-item. Dies ermöglicht es, das Symbol neben der Beschriftung als Offenlegungs-Widget vom Standard (in der Regel ein Dreieck) zu ändern oder zu entfernen.

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

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

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

Unten sehen Sie einige Beispiele, die die Verwendung von <summary> zeigen. Weitere Beispiele finden Sie in der Dokumentation zum <details> Element.

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

Sie können Überschriftselemente in <summary> verwenden, wie folgt:

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

Dieses Beispiel fügt dem <summary> Element einige Semantiken hinzu, um die Beschriftung als wichtig hervorzuheben:

<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 Symbol des <summary> Elements, das Offenlegungsdreieck, kann mit CSS angepasst werden. Das Symbol kann mit dem ::marker Pseudoelement angesprochen werden, das die list-style Shorthand-Eigenschaft und ihre längerfristigen Komponenteneigenschaften, wie list-style-type, akzeptiert. Dadurch kann das Dreieck in ein Bild (normalerweise mit list-style-image) oder eine Zeichenkette (einschließlich Emojis) geändert werden. In diesem Beispiel ersetzen wir den Inhalt eines Offenlegungs-Widgets und entfernen das Symbol von einem anderen, indem wir list-style: none setzen, bevor ein benutzerdefiniertes Offenlegungssymbol über generierten Inhalt hinzugefügt wird.

CSS

Im ersten Offenlegungs-Widget gestalten wir das ::marker, indem wir den content basierend auf das [open] Attribut des <details> Elements ändern. Für das zweite Widget entfernen wir das Symbol mit list-style Eigenschaften, dann fügen wir gestylten generierten Inhalt mit dem ::after Pseudoelement hinzu. Wir enthalten auch Stile für ::-webkit-details-marker, um Safari anzusprechen. Der Selektor für das browserspezifische Pseudoelement ist in einer :is() Pseudoklasse enthalten, damit es 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 beinhaltet den [open] Attributselektor, der nur dann passt, wenn das open-Attribut vorhanden ist (wenn die <details> geöffnet sind). Die :first-of-type und :last-of-type Pseudoklassen zielen auf das erste und Geschwisterelemente desselben Typs ab. Wir haben das mit -webkit- vorangestellte Pseudoelement innerhalb einer :is() Pseudoklasse enthalten, da es eine verzeihende Selektorliste verwendet, so dass, wenn das vorangestellte Pseudoelement in einem Browser ungültig ist, der gesamte Selektorblock nicht ungültig wird. Wir haben auch CSS Verschachtelung verwendet. Siehe 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

• <details>