::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 die ein- und ausklappbaren Inhalte eines <details>-Elements.

Syntax

css
selector::details-content

Beispiele

Einfaches Beispiel

In diesem Beispiel wird das ::details-content-Pseudoelement verwendet, um eine background-color für den Inhalt des <details>-Elements festzulegen.

HTML

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

CSS

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

Ergebnis

Beispiel mit Übergang

In diesem Beispiel wird das ::details-content-Pseudoelement verwendet, um einen transition auf den Inhalt des <details>-Elements festzulegen, sodass es beim Öffnen sanft eingeblendet und beim Schließen wieder ausgeblendet wird. Um dies zu erreichen, werden zwei separate Übergänge innerhalb der transition-Kurznotation angegeben:

  • Die opacity-Eigenschaft erhält einen Basisübergang über 600ms, um den Ein- und Ausblendeffekt zu erzeugen.
  • Die content-visibility-Eigenschaft (die beim Erweitern/Reduzieren des <details>-Inhalts zwischen hidden und visible umgeschaltet wird) erhält ebenfalls einen grundlegenden 600ms-Übergang, jedoch mit dem Wert transition-behavior allow-discrete. Dieser signalisiert dem Browser, dass ein Übergang für content-visibility gestartet werden soll, dessen Animationsverhalten diskret ist. Der Effekt besteht darin, dass der Inhalt während der gesamten Dauer des Übergangs sichtbar bleibt, sodass andere Übergänge beobachtbar sind. Wenn dieser Übergang nicht enthalten wäre, würde der Inhalt sofort verschwinden, sobald der <details>-Inhalt reduziert wird — das sanfte Ausblenden wäre nicht sichtbar.

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