Das CSS-Pseudoelement ::details-content bietet eine Möglichkeit, die inneren Teile eines <details>-Elements auszuwählen und Stile anzuwenden, ohne dass Stile auf das <summary>-Element übergreifen.
details::details-content {
background-color: hsl(0 0% 0%);
}Syntax
<element-selector>::details-content {}Wir sagen <element-selector> darin, aber ::details-content ist spezifisch an das <details>-Element gebunden, was bedeutet, dass Sie dies in vielen Fällen als Selektor verwenden werden.
details::details-content {}Wenn Sie natürlich ein bestimmtes <details>-Element auswählen möchten, ist es auch möglich, es per Klasse auszuwählen.
.my-class::details-content {}Endlich eine Möglichkeit, den Inhalt von Details zu stylen!
Der HTML-Code für ein typisches <details>-Element sieht ungefähr so aus.
<details>
<summary>Details Example</summary>
Whatever content or other markup we want in this space!
</details>Es ist einfach, das <details>-Element zu stylen, indem man es einfach in CSS auswählt.
Wir können das Element auch stylen, wenn es geöffnet ist, indem wir das Attribut open verwenden.
Es ist genauso einfach, dem <summary>-Element Stile hinzuzufügen, da wir es direkt auswählen können.
Wir können sogar den kleinen Pfeil vor dem <summary> stylen. Wenn wir die Entwicklertools öffnen und das Element inspizieren, sehen wir dort einen Shadow DOM mit einem -webkit-spezifischen Pseudo-Element dafür.
Sehen Sie das? Es ist ein Pseudo-Element zum <summary>-Element, also können wir es so auswählen:
summary::-webkit-details-marker {
/* Style away! */
}Aber wie in aller Welt können wir den Inhalt innerhalb eines <details>-Elements stylen? Das ist es, was uns gefehlt hat und wofür das Pseudo-Element ::details-content da ist. Zum Zeitpunkt des Schreibens ist ::details-content von keinem Browser implementiert, sodass wir keine konkrete Möglichkeit haben zu zeigen, wie es funktioniert. Vorausgesetzt, dass sich an der Spezifikation nichts ändert, bis sie formell übernommen wird, könnte es so aussehen:
details::details-content {
background-color: hsl(0 0% 0% / .85);
margin-block: 1rem;
}Deshalb brauchen wir ::details-content. Es ist sozusagen ein fehlendes Teil im Styling-Puzzle für <details>.
Beispiel
Wir haben bereits ein Beispiel betrachtet, aber die Spezifikation enthält eines, das es wert ist, hervorgehoben zu werden. Es ist interessant, weil es zeigt, wie wir den Inhalt animieren könnten, sodass er einblendet.
details::details-content {
display: block;
opacity: 0;
transition: content-visibility 300ms allow-discrete step-end, opacity 300ms;
}
details[open]::details-content {
opacity: 1;
transition: content-visibility 300ms allow-discrete step-start, opacity 300ms;
}Was zum Teufel?! Dies deutet darauf hin, dass das Pseudo-Element mit nativen CSS-Übergängen funktioniert – sogar mit mehrstufigen Übergängen! Lassen Sie uns eine Live-Demo einfügen und sehen, ob sie funktioniert, wenn wir breitere Unterstützung erhalten.
Browser-Unterstützung
Derzeit keine! Wir werden eine ordnungsgemäße Support-Tabelle einfügen, sobald die Unterstützung eintrifft.
Spezifikation
Die Eigenschaft ::details-content ist im CSS Pseudo-Elements Module Level 4 spezifiziert. Sie befindet sich derzeit im Editor's Draft-Status, was bedeutet, dass sie noch keine formelle Empfehlung von der WHATWG auf der HTML-Seite und der CSS Working Group auf der CSS-Seite geworden ist und sich zwischen jetzt und dann ändern könnte. Wenn Sie also überlegen, ob Sie dies auf einer Live-Website ausprobieren sollen, ist es am besten, abzuwarten, bis mehr Browser die Unterstützung dafür implementieren.
Wenn Sie interessiert sind, wurde die Definition im Juni 2024 in die Spezifikation aufgenommen und den Commit finden Sie hier. Sie können auch eine Diskussion darüber in ein paar GitHub-Threads für weiteren Kontext finden.
