HTML/Tutorials/details
Text-Info
- 15min
- leicht
- HTML
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.
- Browserunterstützung
- caniuse.com
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]
- Browserunterstützung
- caniuse.com
Die Spezifikation nennt für die Marker-Box die Eigenschaften content sowie sämtliche animation- und transition-Eigenschaften. Hinzu kommen text-combine-upright, unicode-bidi und direction. Der Marker-Inhalt kann durch alle font-Eigenschaften sowie white-space, text-transform, letter-spacing und color beeinflusst werden.
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;
}
details[open] summary::-webkit-details-marker,
details[open] summary::marker {
content: " 🡱 ";
color: red;
}
Dieses Beispiel funktionierte vor kurzem noch nicht, mit Chrome 89 und Firefox 86 (Stand März 2021) sieht es besser aus.
Opera ist auch in Version 74 noch zurück und verlangt die proprietäre summary::-webkit-details-marker Notation. Die Zuweisung eines content ist ebenfalls nicht möglich, es erscheinen die Standarddreiecke; aber in rot und grün, durch font-size vergrößert und die Transition der Farben funktioniert auch.
Safari: Tests ausstehend.
Ersatz durch Pseudoelement[Bearbeiten]
Wenn man zum Stylen des Markers Eigenschaften benutzen will, die von den Browsern noch nicht dafür vorgesehen sind, kann man ihn stattdessen auch ausblenden und dafür ein eigenes Pseudoelement erzeugen und formatieren:
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);
}
Die display: Eigenschaft gehört zu denen, die vom Marker nicht beachtet werden, deshalb wird 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 die Interaktion (weiches Öffnen des details-Elements) zu verbessern, 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
