HTML/Tutorials/details

Aus SELFHTML-Wiki
< HTML‎ | Tutorials(Weitergeleitet von HTML/Interaktiv/details)
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

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.

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;  
}	

details[open] summary::-webkit-details-marker,
details[open] summary::marker {
  content:  " 🡱 ";
  color: red;
}
So sieht's im Firefox 85 aus.

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 statt dessen auch ausgeblenden und dafür ein eigenes Pseudoelement erzeugen und formatieren:

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);
}

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:

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