HTML/Tutorials/details
Das details-Element ermöglicht es, Seiteninhalte zu verstecken und mit einem Klick auf summary aufzuklappen. Dieses Verhalten wird oft als „Akkordeon“ bezeichnet, vor allem wenn mehrere solcher aufklappbaren Elemente vorhanden sind.
Details: caniuse.com
Früher konnte ein solches Akkordeon nur mit vielen Zeilen JavaScript verwirklicht werden. Dabei wurde jedoch oft auf eine Bedienbarkeit mit der Tastatur keine Rücksicht genommen. Das details-Element bietet nun eine zugängliche und einfache Alternative.
Inhaltsverzeichnis
Akkordeon mit details[Bearbeiten]
details bezeichnet einen semantischen Abschnitt, der mit Text, Bildern (oder einem figure-Element, einem Formular oder auch anderen details) gefüllt werden kann.
Überschrift mit summary[Bearbeiten]
Mit summary können Sie dem Akkordeon eine Überschrift geben. Links daneben wird ein details-marker-Pseudoelement in Form eines schwarzen Dreiecks angezeigt. Es verändert bei einer Zustandsänderung seine Richtung.
Ein Klick mit der Maus öffnet den versteckten Abschnitt. Alternativ bringt die Tab-Taste die Überschrift summary in den Fokus. Ein Klick auf Leertaste oder Enter ⏎ öffnet dann den Text.
open[Bearbeiten]
Mit dem Klick auf die summary wird details das Attribut open angehängt. Um die Details direkt anzuzeigen, können Sie es auch direkt im HTML-Code notieren. Es eignet sich auch als Angriffspunkt, um das betreffende Element mit CSS zu gestalten:
<details open>
<summary>
Browser-News:
</summary>
<p>
Während Chrome, Opera und Safari das neue Element schon sehr lange unterstützen,
ist es in Firefox seit Version 49 verfügbar.
</p>
</details>
details[open] {
background: coral;
margin-bottom: 1em;
}
Gestaltung mit CSS[Bearbeiten]
Wie das details-Element auf Ihrer Webseite dann aussieht, bleibt Ihnen überlassen.
Formatierung des details-markers[Bearbeiten]
Das Summary Element enthält ein kleines schwarzes Dreieck.
Wenn Sie ein summary-Element im Seiteninspektor überprüfen, entdecken Sie weitere, „versteckte“ Elemente im Shadow DOM:
In CSS3 kann der details-marker mit dem ::marker-Selektor ausgewählt und bedingt formatiert werden.[1]
Details: caniuse.com
summary::-webkit-details-marker,
summary::marker {
content: " 🡳 "; /* Verwendung des "Pfeil"-Symbols anstelle des Dreiecks */
color: green;
font-size: 2em;
font-weight:bold;
transition: all 0.5s;
/* position: absolute; Die Positionierung funktioniert nicht im Firefox!
left: 1em; */
}
details[open] summary::-webkit-details-marker,
details[open] summary::marker {
content: " 🡱 ";
color: red;
transform: scale(1,-1); /* Die Transformation funktioniert nicht */
}
Dieses Beispiel funktioniert (Stand November 2020) nicht.
- Der Firefox 85 ignoriert die Positionierung und die transition
- Chrome, Edge und Opera ignorieren noch die Selektion mit
::marker. Stattdessen wird das proprietäresummary::-webkit-details-markerverwendet.- die content-Eigenschaft bleibt unberücksichtigt, das Marker-Dreieck bleibt erhalten
- Die absolute Positionierung funktioniert; platziert das Dreieck dafür aber in den Summary-Text hinein.
Ersatz durch Pseudoelement[Bearbeiten]
Da im oberen Beispiel die Position des details-markers nicht direkt geändert werden kann, wird er ausgeblendet und stattdessen ein Pseudoelement erzeugt und formatiert:
summary {
position: relative;
}
summary::marker {
color: transparent;
}
summary::after {
content: "+";
position: absolute;
color: green;
font-size: 2em;
font-weight: bold;
right: 1em;
top: .2em;
transition: all 0.5s;
}
details[open] summary::after {
color: red;
transform: translate(5px,0) rotate(45deg);
}
Interessanterweise wirkt auf das ::marker-Element kein display: none; deshalb ist einfach die Farbe auf transparent gesetzt.
Das ::after-Pseudoelement erhält eine absolute Positionierung am rechten Rand. Über die content-Eigenschaft erhält es ein Plus-Zeichen, das auf zusätzlichen Inhalt verweist.
Bei einer Änderung des open-Attributs wird es mit einem weichen Übergang um 45° gedreht und so zu einem X, das das Fenster wieder schließt.
Tooltip mit details[Bearbeiten]
Ein Tooltip ist ein kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten. Oft wird es mit einem abbr-Element realisiert, dessen titel-Attribut dann ausgelesen wird. Mit details geht es einfacher:
[role=button] {
background: var(--accent);
color: var(--background);
border-radius: 0 0.5em 0.5em;
border: thin solid var(--accent);
width: min-content;
padding: 0 1.5em 0.5em;
font-size: 1.5em;
line-height: 100%;
font-weight: bold;
}
details[open] [role=button] {
background: var(--background);
color: var(--accent);
}
details p {
position: relative;
padding: 1em;
border: thin solid var(--accent);
border-radius: 0 0.5em 0.5em;
}
details p::before {
content: ' ';
position: absolute;
width: 0;
height: 0;
top: -1em;
left: 20%;
margin-left: -1em;
border-style: solid;
border-width: 0 1em 1em 1em;
border-color: transparent transparent var(--accent) transparent;
}
Das summary-Element erhält jetzt das Aussehen eines Buttons. Damit sich dieser nicht über die gesamte Breite des verfügbaren Platzes erstreckt erhält er mit width: min-content eine an den vorhandenen Inhalt angepasste Breite.
Bei einem Klick auf den (vermeintlichen) Button öffnet sich details p als Sprechblase.
Akkordeon[Bearbeiten]
Es wäre schön, wenn das Akkordeon nicht abrupt, sondern sich mit einem weichen Übergang aufschieben würde. Leider ist dies mit CSS alleine nicht möglich:
details > div {
padding: .5em;
overflow: hidden;}
details[open] > div {
animation: sliding 1s forwards;
}
@keyframes sliding {
0% {
height: 0;
}
100% {
height: 15em;
}
}
Im Beispiel wird die Höhe des div-Containers aminiert. Beim Setzen des open-Attribut wird die animation sliding gestartet. Hierbei benötigt man aber einen festen Wert (hier: 15em), der bei einer Veränderung des Inhalts angepasst werden muss.
Um Interaktion (das Öffnen des details-Elements) zu bessern, kann man JavaScript einsetzen:
- JavaScript/Tutorials/Akkordeon mit details
- zugängliches Akkordeon als Polyfill für den IE, aber auch mit komfortabler Animation.
- Registerkarten (TabPanels)
- Zusammenfassung für längere Artikel
