<summary>: Das Disclosure Summary-Element

Dieses Element enthält nur die globalen Attribute.

Der Inhalt des <summary>-Elements kann jeglichen Überschrifteninhalt, einfachen Text oder HTML umfassen, der 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 genutzt werden kann, um Sie über diesen Zustandswechsel zu informieren.

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

Wenn das erste Kind eines <details>-Elements nicht ein <summary>-Element ist, verwendet der User Agent einen Standardstring (typischerweise "Details") als Label für das Disclosure-Box.

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

Sie können den Stil auch auf display: block ändern, um das Disclosure-Dreieck 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 auf Webkit basierende Browser, wie Safari, ist es möglich, die Anzeigesteuerung des Symbols durch das nicht standardmäßige CSS-Pseudoelement ::-webkit-details-marker zu kontrollieren. Um das Disclosure-Dreieck zu entfernen, verwenden Sie summary::-webkit-details-marker { display: none }.

Im Folgenden sind einige Beispiele dargestellt, die die Verwendung von <summary> zeigen. Weitere Beispiele finden Sie in der Dokumentation zum <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 in <summary> verwenden, so wie dies:

<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 derzeit 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 <summary>-Elementmarker, das Disclosure-Dreieck, kann mit CSS angepasst werden. Der Marker kann mittels des ::marker-Pseudoelements, welches die list-style-Kurzschreibweise und ihre Langschreibkomponenten unterstützt, wie z.B. list-style-type. Dies ermöglicht es, das Dreieck in ein Bild zu verwandeln (gewöhnlich mit list-style-image) oder in eine Zeichenfolge (einschließlich Emojis). In diesem Beispiel ersetzen wir den Inhalt eines Disclosure-Widgets und entfernen das Symbol von einem anderen durch Setzen von list-style: none bevor wir ein benutzerdefiniertes Disclosure-Symbol über generierten Inhalt hinzufügen.

CSS

Im ersten Disclosure-Widget gestalten 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 den list-style-Eigenschaften und fügen dann mit dem ::after-Pseudoelement gestalteten generierten Inhalt hinzu. Wir schließen auch Stile für ::-webkit-details-marker ein, um Safari anzusprechen. Der Selektor für das browser-spezifische Pseudoelement ist in einem :is()-Pseudoklasse enthalten, sodass 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;
}

Der CSS schließt den [open] Attributselektor ein, der nur dann entspricht, wenn das open-Attribut vorhanden ist (wenn das <details> geöffnet ist). Die :first-of-type- und :last-of-type-Pseudoklassen richten sich an die ersten und Geschwisterelemente des gleichen Typs. Wir haben das vorangestellte -webkit- Pseudoelement in einer :is() Pseudoklasse aufgenommen, da es eine fehlerverzeihende Selektorliste annimmt, sodass 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 Modul CSS-Selektoren.

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>