<summary>: Das Offenlegungszusammenfassungs-Element

Dieses Element umfasst nur die globalen Attribute.

Der Inhalt des <summary>-Elements kann beliebiger Überschriftsinhalt, Plaithtext 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 dann wird ein toggle-Ereignis 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, verwendet der User Agent eine Standardzeichenfolge (typischerweise "Details") als Beschriftung für das Offenlegungsfeld.

Entsprechend der HTML-Spezifikation umfasst der Standardstil für <summary>-Elemente display: list-item. Dadurch ist es möglich, das Symbol, das als Offenlegungs-Widget neben der Beschriftung angezeigt wird, vom Standard, der typischerweise ein Dreieck ist, zu ändern oder zu entfernen.

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

Siehe den Abschnitt zur 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 Anzeige des Symbols durch das nicht standardmäßige CSS-Pseudoelement ::-webkit-details-marker zu steuern. Um das Offenlegungsdreieck zu entfernen, verwenden Sie summary::-webkit-details-marker { display: none }.

Nachfolgend sind einige Beispiele aufgeführt, 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 Überschriftselemente im <summary> verwenden, wie dieses:

<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

Es gibt derzeit einige Abstandsprobleme, die mit CSS angegangen werden könnten.

Dieses Beispiel fügt einige Semantiken zum <summary>-Element hinzu, um den Text 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 <summary>-Element-Symbol, das Offenlegungsdreieck, kann mit CSS angepasst werden. Das Symbol kann mit dem ::marker Pseudoelement angesprochen werden, das die list-style Kurzschreibweise und seine Langform-Komponenten akzeptiert, wie list-style-type. Dies ermöglicht das Ändern des Dreiecks in ein Bild (normalerweise mit list-style-image) oder eine Zeichenkette (einschließlich Emojis). In diesem Beispiel ersetzen wir den Inhalt eines Offenlegungs-Widgets und entfernen das Symbol von einem anderen, indem wir list-style: none setzen, bevor wir ein benutzerdefiniertes Offenlegungssymbol über generierten Inhalt hinzufügen.

CSS

Im ersten Offenlegungs-Widget stylen wir den ::marker und ändern den content basierend auf dem [open]-Attribut des <details>-Elements. Für das zweite Widget entfernen wir den Marker mit list-style-Eigenschaften und fügen dann gestylte generierte Inhalte 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 umfasst den [open] Attributselektor, der nur übereinstimmt, wenn das open-Attribut vorhanden ist (wenn das <details> geöffnet ist). Die :first-of-type und :last-of-type Pseudoklassen zielen auf das erste und die Geschwisterelemente des gleichen Typs ab. Wir haben das mit Prefix versehene -webkit- Pseudoelement innerhalb einer :is() Pseudoklasse enthalten, da es eine fehlertolerante Selektorliste berücksichtigt, weshalb der gesamte Selektorblock nicht ungültig ist, wenn das Pseudoelement in einem Browser ungültig ist. Wir haben auch CSS Schachtelung 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>