<summary>: Das Disclosure-Summary-Element

Dieses Element enthält nur die globalen Attribute.

Der Inhalt des <summary>-Elements kann beliebiger Überschrifteninhalt, einfacher 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 Nutzer 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 genutzt werden kann, um Sie über diesen Zustandswechsel zu informieren.

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

Wenn das <details>-Element kein <summary>-Element als erstes Kind hat, verwendet das User-Agent eine Standardzeichenkette (typischerweise "Details") als Beschreibung für das Expandierfeld.

Laut HTML-Spezifikation beinhaltet der Standardstil für <summary>-Elemente display: list-item. Dadurch ist es möglich, das standardmäßig angezeigte Symbol als Disclosure-Widget neben dem Label zu ändern oder zu entfernen, welches typischerweise ein Dreieck ist.

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

Siehe die Browser-Kompatibilität Abschnitt 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 Symbolanzeige durch das nicht standardmäßige CSS-Pseudoelement ::-webkit-details-marker zu steuern. Um das Disclosure-Dreieck zu entfernen, verwenden Sie summary::-webkit-details-marker { display: none }.

Unten sind einige Beispiele zur Verwendung von <summary>. Weitere Beispiele finden Sie in der Dokumentation des <details>-Elements.

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 Überschriftenelemente 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

Dies hat momentan einige Abstandsprobleme, die mit CSS behoben werden könnten.

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

Das Markerzeichen des <summary>-Elements, das sogenannte Disclosure-Dreieck, kann mit CSS angepasst werden. Der Marker kann mit dem ::marker-Pseudoelement anvisiert werden, welches die Verwendung der list-style-Kurzschrift und ihrer Langunterkomponenten, wie etwa list-style-type, ermöglicht. Dies erlaubt es, das Dreieck zu einem Bild (meist mit list-style-image) oder einer Zeichenkette (einschließlich Emojis) zu ändern. In diesem Beispiel ersetzen wir den Inhalt eines erweiterten Widgets und entfernen das Symbol von einem anderen, indem list-style: none eingestellt wird, bevor ein benutzerdefiniertes Disclosure-Symbol durch generierten Inhalt hinzugefügt wird.

CSS

Im ersten erweiterten Widget gestalten wir den ::marker, wobei wir den content basierend auf das [open]-Attribut des <details>-Elements ändern. Für das zweite Widget entfernen wir den Marker mit list-style Eigenschaften und fügen dann gestylten generierten Inhalt mit dem ::after-Pseudoelement hinzu. Wir schließen auch Stile für ::-webkit-details-marker ein, 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 enthält den [open] Attributselektor, der nur ausgewählt wird, wenn das open-Attribut vorhanden ist (wenn die <details> offen sind). Die :first-of-type und :last-of-type Pseudoklassen zielen auf die ersten und Geschwisterelemente desselben Typs. Wir haben das präfixierte -webkit--Pseudoelement innerhalb einer :is()-Pseudoklasse einbezogen, da es eine verzeihliche Selektorliste akzeptiert, sodass, wenn das präfixierte Pseudoelement in einem Browser ungültig ist, der gesamte Selektorblock nicht ungültig wird. Wir haben auch CSS Nesting verwendet. Siehe das CSS Selektoren-Modul.

HTML

<details>
<h1>Quotes from Helen Keller</h2>
  <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>