::details-content

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das ::details-content CSS Pseudoelement repräsentiert den erweiterbaren/zusammenklappbaren Inhalt eines <details> Elements.

Syntax

css
selector::details-content

Beispiele

Einfaches Beispiel

In diesem Beispiel wird das Pseudoelement ::details-content genutzt, um eine background-color auf den Inhalt des <details> Elements anzuwenden.

HTML

html
<details>
  <summary>Click me</summary>
  <p>Here is some content</p>
</details>

CSS

css
details::details-content {
  background-color: #a29bfe;
}

Ergebnis

Übergangsbeispiel

In diesem Beispiel wird das Pseudoelement ::details-content verwendet, um eine transition auf den Inhalt des <details> Elements zu setzen, sodass es sanft ein- und ausblendet, wenn es erweitert bzw. zusammengeklappt wird. Um dies zu erreichen, werden zwei separate Übergänge innerhalb der Kurzform-Eigenschaft transition angegeben:

  • Der Eigenschaft opacity wird ein einfacher Übergang über 600ms zugewiesen, um den Effekt des Ein- und Ausblendens zu erzeugen.
  • Der Eigenschaft content-visibility (die zwischen hidden und visible geschaltet wird, wenn der <details>-Inhalt erweitert/zusammengeklappt wird) wird ebenfalls ein einfacher 600ms Übergang zugewiesen, jedoch mit dem transition-behavior Wert allow-discrete. Damit wird der Browser in die Lage versetzt, einen Übergang auf content-visibility zu starten, wobei das Animationsverhalten diskret ist. Der Effekt ist, dass der Inhalt für die gesamte Dauer des Übergangs sichtbar ist, wodurch andere Übergänge gesehen werden können. Wenn dieser Übergang nicht enthalten wäre, würde der Inhalt sofort verschwinden, wenn der <details>-Inhalt zusammengeklappt wird — man würde das sanfte Ausblenden nicht sehen.

HTML

html
<details>
  <summary>Click me</summary>
  <p>Here is some content</p>
</details>

CSS

css
details::details-content {
  opacity: 0;
  transition:
    opacity 600ms,
    content-visibility 600ms allow-discrete;
}

details[open]::details-content {
  opacity: 1;
}

Ergebnis

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4
# details-content-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch