<summary>: Das Disclosure Summary Element

Dieses Element umfasst nur die globalen Attribute.

Der Inhalt des <summary>-Elements kann jeglichen Überschriften-Inhalt, einfachen Text oder HTML sein, 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 verwendet 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 kein <summary>-Element ist, wird der User-Agent eine Standardzeichenfolge (typischerweise "Details") als Beschriftung für das Disclosure Box verwenden.

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

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

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

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

Nachfolgend einige Beispiele, die <summary> in Verwendung zeigen. Weitere Beispiele finden Sie in der Dokumentation des <details>-Elements.

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 dem <summary>-Element einige Semantiken hinzu, um die Beschriftung 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 Offenlegungsdreieck, kann mit CSS angepasst werden. Der Marker kann mit dem ::marker-Pseudo-Element angesprochen werden, das die list-style-Kurzform-Eigenschaft und seine Langform-Komponenten-Eigenschaften, wie list-style-type, akzeptiert. Dies ermöglicht es, das Dreieck in ein Bild (normalerweise mit list-style-image) oder eine Zeichenfolge (einschließlich Emojis) zu ändern. In diesem Beispiel ersetzen wir den Inhalt eines Offenlegungs-Widgets und entfernen das Symbol von einem anderen, indem wir list-style: none vor der Hinzufügung eines benutzerdefinierten Offenlegungssymbols über generierten Inhalt setzen.

CSS

Im ersten Offenlegungs-Widget gestalten 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 gestalteten generierten Inhalt mit dem ::after-Pseudo-Element hinzu. Wir haben auch Stile für ::-webkit-details-marker hinzugefügt, um Safari anzusprechen. Der Selektor für das browserspezifische Pseudo-Element ist in einer :is()-Pseudo-Klasse enthalten, um die Selektorliste nicht zu invalidieren.

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 dann zutrifft, wenn das Attribut open vorhanden ist (wenn die <details> offen sind). Die :first-of-type- und :last-of-type-Pseudo-Klassen richten sich an die ersten und Geschwisterelemente desselben Typs. Wir haben das -webkit--pseudoelement mit Präfix in eine :is()-Pseudo-Klasse einbezogen, da es eine vergebende Selektorliste akzeptiert, sodass der gesamte Selektorblock nicht ungültig wird, wenn das Pseudo-Element mit Präfix in einem Browser ungültig ist. Wir haben auch das CSS Verschachtelung verwendet. Siehe das Modul CSS-Selektoren.

HTML

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