<summary>: Das Disclosure Summary-Element

Dieses Element umfasst nur die globalen Attribute.

Der Inhalt des <summary>-Elements kann jeder Ü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 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 Sie wissen zu lassen, wann diese Zustandsänderung erfolgt.

Der Inhalt des <details> bietet die barrierefreie Beschreibung für das <summary>.

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

Laut HTML-Spezifikation umfasst der Standardstil für <summary>-Elemente display: list-item. Dies macht es möglich, das angezeigte Symbol als Enthüllungs-Widget neben der Beschriftung vom Standard, der typischerweise ein Dreieck ist, zu ändern oder zu entfernen.

Sie können den Stil auch in display: block ändern, um das Enthüllungsdreieck zu entfernen.

Siehe den Abschnitt Browser-Kompatibilität für weitere 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 über das nicht standardisierte CSS-Pseudoelement ::-webkit-details-marker zu steuern. Um das Enthüllungsdreieck zu entfernen, verwenden Sie summary::-webkit-details-marker { display: none }.

Im Folgenden sind einige Beispiele, die <summary> in Gebrauch 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 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 derzeit einige Abstandsprobleme, die mit CSS behoben werden könnten.

Dieses Beispiel fügt einige Semantiken dem <summary>-Element 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 Marker-Symbol des <summary>-Elements, das Enthüllungsdreieck, kann mit CSS angepasst werden. Das Marker-Symbol kann mit dem ::marker Pseudoelement angesprochen werden, das die list-style Kurzschrift-Eigenschaft und ihre Komponenten wie list-style-type akzeptiert. Dies ermöglicht es, das Dreieck in ein Bild (in der Regel mit list-style-image) oder einen String (einschließlich Emojis) zu ändern. In diesem Beispiel ersetzen wir den Inhalt eines Enthüllungs-Widgets und entfernen das Symbol von einem anderen, indem wir list-style: none setzen, bevor ein benutzerdefiniertes Enthüllungssymbol über generierten Inhalt hinzugefügt wird.

CSS

Im ersten Enthüllungs-Widget stylen wir den ::marker und ändern das 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 gestylten generierten Inhalt mit dem ::after-Pseudoelement hinzu. Wir schließen auch Stile für ::-webkit-details-marker ein, um Safari zu adressieren. Der Selektor für das browserspezifische Pseudoelement ist in einer :is() Pseudoklasse enthalten, damit der Selektor, wenn das Pseudoelement in einem Browser ungültig ist, die gesamte Selektorliste nicht ungültig wird. Wir haben auch CSS Verschachtelung verwendet. Siehe das CSS-Selektoren Modul.

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 übereinstimmt, 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 letzte Geschwisterelement des gleichen Typs. Wir haben das mit -webkit- vorausgesetzte Pseudoelement innerhalb einer :is() Pseudoklasse aufgenommen, da es eine verzeihliche Selektorliste aufnimmt, so dass, wenn das vorausgesetzte 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>