HTML/Tutorials/details

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • HTML5
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

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.

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.

Beachten Sie: Wenn kein Summary-Element verwendet wird, zeigt der Browser den Text Details an.


details und summary ansehen …
<details> <summary> Update News: </summary> <p> Das details-Element ermöglicht es, ganz ohne den Einsatz von JavaScript, ursprünglich verborgene Textinhalte aufzuklappen. </p> </details>


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:

Einbindung von open
<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>


CSS-Formatierung für open
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:

Details-shadow-root.png

In CSS3 kann der details-marker mit dem ::marker-Selektor ausgewählt und bedingt formatiert werden.[1]

  • CSS 3.0
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com


CSS-Formatierung des details-Symbols ansehen …
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 */	
}
So sieht's im Firefox 85 aus.

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äre summary::-webkit-details-marker verwendet.
    • 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:

CSS-Ersatz durch Pseudoelement ansehen …
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:

Tooltipps ansehen …
[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:

Akkordeon mit CSS-animation ansehen …
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.

Beachten Sie: Solche Magic Numbers sollten nach Möglicheit vermieden werden!


Um Interaktion (das Öffnen des details-Elements) zu bessern, kann man JavaScript einsetzen:


Quellen[Bearbeiten]

  1. MDN: ::marker