20 Einfache Möglichkeiten zur Gestaltung des HTML-details-Elements

Tutorials
HTML5

In diesem Artikel werden wir uns einige einfache Möglichkeiten ansehen, um das HTML-Element <details> zu gestalten, was ein sehr nützliches Element zur Aufdeckung und Verbergung von Inhalten auf einer Webseite ist.

Es ist praktisch, ein einfaches Offenlegungselement in HTML zu haben, das kein JavaScript erfordert, aber das Standard-Styling des <details> Elements könnte für einige ein Abnehmer sein. Glücklicherweise ist es ziemlich einfach, das Styling dieses Elements zu ändern.

Die folgende Inhaltsübersicht ist ein Beispiel für das <details> Element im Einsatz. Wir haben ihm eine einfache Rahmen hinzugefügt, zusammen mit einigen Abstands.

Table of Contents

Einführung des Details-Elements

Hier ist der grundlegende Code für das <details> Element:

<details>
  <summary>Click me!</summary>
  <p>Peekaboo! Here's some hidden content!</p>
</details>

Grundsätzlich kann jedes HTML-Inhaltselement innerhalb des <details> Elements platziert werden. Das <summary> Element bietet den Anweisungen für den Benutzer, um auf das Element zu klicken, um weiteren Inhalt freizugeben, und es muss das erste Kind des <details> Elements sein.

Hier ist ein Live-Beispiel dieses Codes:

Click me!

Peekaboo! Hier ist etwas versteckter Inhalt!

Schauen wir uns alle Möglichkeiten an, wie wir CSS verwenden können, um das Aussehen unseres <details> Elements zu verbessern.

Hintergrundfarben, Rahmen und Abstand

A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.

Hinzufügen eines Rahmens

Wie im Inhaltsverzeichnis oben gezeigt, kann ein einfacher Rahmen viel tun, um das <details> Element zu verbessern und zu definieren, zusammen mit ein wenig Abstand und einem geringen Rahmenradius:

details {
  padding: 10px; 
  border: 5px solid #f7f7f7;
  border-radius: 3px;
}

Das ist der einfache Code, den wir oben verwendet haben, um unser Inhaltsverzeichnis zu gestalten.

Hinzufügen einer Hintergrundfarbe

Lassen Sie uns stattdessen einen Hintergrund für unser <details> Element hinzufügen:

details {
  padding: 10px;
  background-color: #e4eaef;
  border-radius: 5px;
}

Das Ergebnis ist im Stift unten gezeigt.

Die Hintergrundfarbe gibt dem Element eine bessere Definition, und der Abstand hilft, etwas Platz darin zu schaffen.

Wir können auch eine andere Hintergrundfarbe für das <summary> Element verwenden, um es vom Rest des Inhalts zu unterscheiden, und seine Textfarbe ändern:

summary {
  background-color: #2196F3;
  color: white;
  padding: 10px;
}

Beachten Sie, dass das Ändern der Textfarbe des `<summary>`-Elements auch die Farbe des Markierungszeigers ändert. Das liegt daran, dass der Zeiger tatsächlich am `<summary>`-Element befestigt ist, genau wie Markierungen (wie Kugeln) an Listenelementen angebracht sind. Wir werden unten sehen, wie man sie separat gestaltet.

Gestalten des Markers

Das `<summary>`-Element ist auf eine `display` von `list-item` eingestellt. So kann der Standardpfeil (▶) ähnlich wie die Standardmarkierungen bei HTML-Listenelementen verändert werden. Wir können das verwendete Zeichen ändern und die Farbe unabhängig davon ändern.

Ändern der Markerfarbe

Lasst uns den Standardmarker auf eine andere Farbe setzen. Nur zum Spaß erhöhen wir auch die Schriftgröße des Markers. Das können wir mit dem `::marker` Pseudo-Element tun:

summary::marker {
  color: #e162bf;
  font-size: 1.2em;
}

Das Ergebnis ist unten gezeigt.

Es ist eine schöne, einfache Lösung, obwohl `::marker` leider in Safari nicht unterstützt wird, also schaut unten nach anderen Optionen, wenn das ein Dealbreaker ist.

Ändern des Markerabstands

Standardmäßig ist der Markierungszeiger ziemlich nah am Zusammenfassungstext. Seine `list-style-position` ist auf `inside` eingestellt. Wenn wir es auf `outside` ändern, können wir durch Hinzufügen einer linken Polsterung Platz zwischen dem Zusammenfassungstext und dem Marker hinzufügen. Wir müssen auch einen linken Rand hinzufügen, damit das Dreieck nicht außerhalb des Containers hängt:

summary {
  list-style-position: outside;
  margin-left: 30px;
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
}

Das Ergebnis ist unten gezeigt.

I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.

Ändern der Markerform

Der Marker unseres <summary>-Elements muss nicht unbedingt ein Dreieck sein. Wir können ihn durch jeden beliebigen Zeichen ersetzen, den wir mögen:

summary {
  list-style-type: '⬇ ';
}

Beachten Sie, dass wir '⬇ ' (mit einem Leerzeichen neben dem Pfeil) verwendet haben, was eine Alternative zu dem oben ausprobierten Abstand ist.

Wir haben jetzt einen Pfeil nach unten anstelle eines Dreiecks. Aber … dieser Pfeil nach unten ändert sich nicht, wenn das <details>-Element geöffnet ist. Das liegt daran, dass das <details>-Element zwei Zustände hat — geschlossen und offen — und wir haben den Marker nur für den geschlossen-Zustand festgelegt. Legen wir also auch einen Marker für den offen-Zustand fest:

details[open] > summary {
  list-style-type: '⬆ ';
}

Dieses Mal haben wir einen aufwärts zeigenden Pfeil verwendet. Das gibt uns das unten gezeigte Ergebnis.

Verdammt! Noch einmal enttäuscht uns Safari, da es list-style-type auch für das <summary>-Element nicht unterstützt. Geben Sie jedoch nicht auf, denn wir werden weitere ausgefallene Lösungen unten betrachten.

Wir können alle möglichen anderen Zeichen ausprobieren, wie zum Beispiel + und –, ✓ und Χ oder ✗, ⋁ und ⋀ , und sogar Spaß mit anderen Zeichen wie ★ oder bunten Früchten wie 🍏 🍌 🍓 🍋 und 🍐 haben, aber denken Sie daran, dass diese Zeichen möglicherweise auf allen Systemen nicht funktionieren, also seien Sie ein bisschen vorsichtig, und noch einmal, list-style-type wird auf jeden Fall in Safari nicht funktionieren.

Erstellen eines benutzerdefinierten Markers für das summary-Element

Wie wir oben gesehen haben, können wir zwar ein anderes Zeichen für den Standardmarker festlegen und es mit Stilen wie Farbe und Schriftgröße versehen, es können jedoch Probleme auftreten. Eine bessere Option könnte sein, den Marker vollständig zu entfernen und eine völlig individuelle Alternative zu schaffen.

Entfernen des benutzerdefinierten Markers

Wie bei Listenelementmarkern können wir den Marker vollständig entfernen:

summary  {
  list-style: none;
}

/* Ach ja, Safari wieder */

summary::-webkit-details-marker {
  display: none;
}

Der Standard list-style: none funktioniert in allen Browsern mit Ausnahme von … (kannst du es erraten?) … Safari. Zumindest gibt es in diesem Fall eine proprietäre -webkit- Option.

Hinweis: Ein weiterer Weg, den Marker vom <summary> Element zu entfernen, besteht darin, dem <summary> Element einen display Wert zuzuweisen, der nicht list-item ist — wie zum Beispiel block oder flex. Dies funktioniert in jedem Browser mit Ausnahme von … (muss ich es überhaupt sagen?) … Safari.

Jetzt hat unser Element keinen Marker mehr.

Kein Marker gibt keine visuelle Aufforderung, dass dieses Element anklickbar ist, daher ist es keine gute Idee, es dabei zu belassen.

Verwenden eines Hintergrundbildes als Marker

Wir könnten ein Bild auf dem Hintergrund platzieren, wie folgt:

summary {
  list-style: none;
  padding: 10px 10px 10px 40px;
  background: url(arrow.svg) no-repeat 14px 50%;
  background-size: 18px;
  font-weight: bold;
}

Das Ergebnis ist unten gezeigt.

Der Nachteil der Verwendung eines Hintergrundbilds direkt auf dem <summary>-Element ist, dass wir es nicht drehen können, wenn das <details>-Element geöffnet ist, weil Animationen in CSS nicht direkt auf Hintergrundbilder angewendet werden können. (Wir könnten natürlich ein anderes Bild für den geöffneten Zustand verwenden, aber wir könnten es immer noch nicht animieren, was viel mehr Spaß macht.) Wenn wir also ein Hintergrundbild verwenden möchten, ist es besser, es auf ein Element zu platzieren, das gedreht und/oder animiert werden kann.

Verwenden eines Hintergrundbilds als Markierung mit ::after

Platzieren wir das Hintergrundbild innerhalb eines ::after Pseudo-Elements:

summary {
  display: flex;
}

summary::after {
  content: '';
  width: 18px;
  height: 10px;
  background: url('arrow.svg');
  background-size: cover;
  margin-left: .75em;
  transition: 0.2s;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

Hier ist eine Live-Demo dieses Codes.

Wir haben display: flex auf dem <summary>-Element verwendet, um es einfach horizontal zu positionieren.

Das Schöne an diesem Setup ist, dass wir der Pfeilanimation hinzufügen können. (Die Animation scheint in Safari nicht zu funktionieren, aber das Verhalten ist gut genug, und ich habe langsam die Nase voll von diesem Browser!)

Das Aussehen des summary-Elements wie eine Registerkarte gestalten

Wir haben das <summary>-Element auf volle Breite gesetzt, aber es muss nicht sein. Wir könnten es mehr wie eine Registerkarte aussehen lassen, mit dieser einfachen Änderung:

summary {
  display: inline-flex;
}

Ein Beispiel wird unten gezeigt.

Begrenzung der Breite des Details-Elements

In all unseren bisherigen Beispielen hat das <details> Element sich immer über die volle Breite seines Containers erstreckt, da es ein blockbasiertes Element ist. Wir können ihm jedoch eine andere Breite geben, wenn wir es nicht so breit haben möchten, z.B. width: 50%;. Oder wir könnten es auf Inline-Anzeige setzen, sodass es nur so breit ist wie sein Inhalt:

details {
  display: inline-block;
}

Klicken Sie auf die Registerkarte unten, um die schmalere Breite des <details> Elements zu enthüllen.

Versuchen Sie, display: inline-block in der obigen Stiftung in width: 50% zu ändern.

Platzieren des Markierungspfeils am äußersten Ende des Zusammenfassung

Machen wir jetzt etwas anderes und platzieren den Markierungspfeil auf der rechten Seite des <summary> Elements. Da wir display: flex verwenden, ist es so einfach, den Pfeil ganz nach rechts zu bewegen, indem wir justify-content: space-between zum <summary> Element hinzufügen:

summary {
  display: flex;
  justify-content: space-between;
}

Verwenden von ::after als Markierung ohne Hintergrundbild

Es gibt auch andere Möglichkeiten, wie wir ::after ohne tatsächliches Bild verwenden könnten. Hier ist ein Beispiel, das nur ::after mit Grenzen verwendet:

summary::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 10px solid #15171b;
  border-inline: 7px solid transparent;
  transition: 0.2s;
}

Hier ist eine Live-Demo.

Jetzt haben wir einen Pfeil, der zwischen dem geschlossenen und geöffneten Zustand rotiert. Wir haben auch einen schönen Tiefenabfall zum <details> Element hinzugefügt.

Eine weitere Möglichkeit, ::after ohne Bild zu verwenden, besteht darin, Unicode-Zeichen innerhalb der content-Eigenschaft zu platzieren:

summary::after {
  content: "\25BC";
  transition: 0.2s;
}

Dies setzt eine Dreiecksform (▼) als unseren Marker, wie in dieser CodePen-Demo gezeigt.

Es gibt Tausende von Unicode-Symbolen, und sie sind ziemlich spaßig zu erkunden. Jedes kommt mit einem Code wie U + 25BC oder U + 025BC. Um diesen Code innerhalb der content-Eigenschaft zu verwenden, nehmen Sie die Zeichen nach dem + und platzieren Sie sie innerhalb der content-Anführungszeichen, mit einem \ am Anfang: content: "\25BC". Wenn am Anfang ein oder mehrere Nullen stehen, können Sie diese weglassen. (Zum Beispiel kann U + 02248 zu "\02248" oder "\2248" werden.)

Verschiedene Zusatzfunktionen

Bisher haben wir mehr als genug getan, aber es gibt noch andere Dinge, mit denen wir Spaß haben können, also spielen wir hier einfach mit einigen davon.

Hover-Effekt auf dem <details>-Element

Wir können verschiedene Hover-Effekte auf das <details>-Element setzen. Zum Beispiel könnten wir so etwas tun:

details {
  transition: 0.2s background linear;
}

details:hover {
  background: #dad3b1;
}

Während wir es tun, lassen Sie uns auch die <summary>-Textfarbe im open-Zustand übergeben:

details > summary {
  transition: color 1s;
}

details[open] > summary {
  color: #d9103e;
}

Das Ergebnis ist unten gezeigt.

Wir könnten auch einfach einen Hintergrundwechsel auf dem <summary>-Element setzen.

Animieren des Öffnens und Schließens des <details>-Elements

Haha, hab ich dich getäuscht! Es scheint, dass es nicht möglich ist, das Öffnen und Schließen des `<details>`-Elements zu animieren. Laut MDN:

Leider gibt es in diesem Moment keine integrierte Möglichkeit, den Übergang zwischen offen und geschlossen zu animieren.

Trotzdem können wir ein wenig Spaß haben, indem wir den Inhalt des `<details>`-Elements animieren. Zum Beispiel könnten wir den Inhalt dazu bringen, einzufallen, sobald er enthüllt wird:

details article {
  opacity: 0;
}

details[open] article {
  animation: fadeIn .75s linear forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

Das Ergebnis ist unten gezeigt.

Ein anderer Trick könnte sein, den Inhalt so hereinzuschieben:

details {
  overflow: hidden;
}

details[open] article {
  animation: animateUp .5s linear forwards;
}

@keyframes animateUp {
  0% {
    opacity: 0;
    transform: translatey(100%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

Das Ergebnis ist unten gezeigt.

Es ist ein bisschen kitschig und vielleicht übertrieben, aber es lohnt sich trotzdem zu probieren. Leider funktionieren diese Animationen nur beim ersten Klick auf das Element (es sei denn, die Browser-Entwicklertools sind geöffnet, aus irgendeinem merkwürdigen Grund!). Man benötigt grundsätzlich die Unterstützung von JavaScript um den Effekt wiederholt zu erzielen.

Ändern des Zusammenfassungs-Contents in geöffneten und geschlossenen Zuständen

In den obigen Demos hat das `<select>` immer den gleichen Text gehabt, unabhängig davon, ob das `<details>`-Element geöffnet oder geschlossen ist. Aber wir könnten das ändern. Zuerst lassen wir den aktuellen Text „Klicke mich“ stehen, fügen aber auch zusätzlichen Text für jeden Zustand hinzu, indem wir das `::after` Pseudo-Element verwenden:

summary::after {
  content: " to show hidden content";
}

details[open] summary::after {
  content: " to hide extra content";
}

Das gibt uns das unten gezeigte Ergebnis.

Ändern des Zusammenfassungskurses

Der Standard-Cursor (oder Mauszeiger) für das <details>-Element ist etwas seltsam. Er ist größtenteils ein Standardpfeil und wird beim Überfahren des <summary>-Textes zu einem Textzeiger (oder I-Beam).

Zum Spaß ändern wir ihn in den Hand-Cursor (oder „Pointer“):

summary {
  cursor: pointer;
}

Dies setzt den Mauszeiger beim Überfahren des gesamten <summary>-Elements auf eine Hand, wie unten gezeigt.

Wir könnten den Cursor stattdessen auf das <details>-Element setzen, was dazu führen würde, dass der Hand-Cursor über das gesamte <details>-Element angezeigt wird. Ich bevorzuge jedoch, ihn nur auf das zu belassen, worauf wir klicken sollen.

Ändern der Zugänglichkeits-Fokusstile

Wenn wir eine Seite über die Tastatur navigieren, können wir auf das <details>-Element tabben und es dann durch Drücken von Return öffnen. Bei Fokus hat das <summary>-Element einen Standardrahmen. Das folgende Bild zeigt, wie dies in verschiedenen Browsern aussieht.

Sie sind ziemlich ähnlich: meist ein einfacher, dunkler (blau oder schwarz), festes Rahmen, der etwa 3px breit ist.

Es gibt viele Stile, die wir für das fokussierte <details>-Element setzen könnten, aber hier ändern wir zur Verdeutlichung des Konzepts den Rahmen in eine rote gepunktete Linie:

summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}

Standardmäßig wird der Fokusrahmen beim Klicken auf das <summary>-Element nicht angezeigt. Aber wenn wir den Fokusstil ändern, wird dieser Stil tatsächlich auch für nicht-tastaturnutzer sichtbar (das heißt, wenn wir mit der Maus auf das <details>-Element klicken). Im obigen Code haben wir das outline auf none gesetzt und stattdessen focus-visible verwendet, um die Stile festzulegen, da dies bedeutet, dass die Fokusstile nur für Tastaturnutzer sichtbar sind (für die sie tatsächlich von Nutzen sind).

Das folgende Bild zeigt unsere neuen Stile.

Hier ist eine Live-Demo.

Damit könnten wir viel Spaß haben, indem wir Animationen, Hintergrundfarben usw. verwenden, wenn das <details>-Element im Fokus ist. Ich überlasse es Ihnen, weiter zu experimentieren.

Verwendung mehrerer Details-Elemente wie einer Akkordeon-Liste

Es gibt Vorschläge, mehrere Details-Elemente so zu koordinieren, dass eines schließt, wenn ein anderes geöffnet wird. Die HTML-Spezifikation schlägt sogar vor, einen gemeinsamen name-Attribut zwischen mehreren <details>-Elementen für diesen Zweck einzuführen.

Es gibt aktuell keine Möglichkeit, dies allein mit HTML und CSS zu tun, aber es gibt einige clevere Beispiele, wie man es mit JavaScript macht (wie hier, hier und hier).

Das Beste, was wir mit CSS tun können, ist, das gerade geöffnete Element anders als die anderen zu gestalten, indem wir einige der oben besprochenen Techniken verwenden.

Hier ist ein einfaches Beispiel:

details {
  background-color: #2196F3;
}

details[open] {
  background-color: #ce0e99;
}

Gestalten eines Überschriftenelements innerhalb des Zusammenfassung

Einige Entwickler, die besorgt über die Struktur ihres HTML sind, möchten gerne ein Überschriftenelement innerhalb des <summary> Elements platzieren. Ob das nützlich ist oder nicht, ist im Diskussionsstadium, aber die Standarddarstellung ist nicht schön, mit der Überschrift auf der Zeile unter dem Pfeil. Dies kann behoben werden, indem die Überschrift auf display: inline oder display: inline-block gesetzt wird:

summary h2 {
  display: inline;
}

Sie können eine Demo davon auf CodePen auschecken.

Schlussfolgerung

Wie wir oben versucht haben zu zeigen, gibt es viele einfache Möglichkeiten, das <details>-Element zu gestalten. Das Setzen von Rahmen, Abständen und Hintergrundfarben ist einfach und verbessert das Aussehen allein schon erheblich. Einige der Methoden zur Gestaltung des Standardmarkers sind sehr praktisch, aber da Forrest’s fruit company () mit der Gestaltung des Markers so viele Probleme hat, könnte es besser sein, diese Option zu meiden und stattdessen einen vollkommen benutzerdefinierten Marker-Element zu erstellen. (Dass gesagt sei, das Styling des Markers bricht das <details>-Element in Safari nicht.)

Es gab Versuche, das Öffnen und Schließen des <details>-Elements nur mit CSS zu animieren, aber diese sind bestenfalls hackig, also lohnt es sich nicht, diesem Kaninchenbau zu folgen. Wenn Sie wirklich animiertes Öffnen und Schließen wünschen, benötigen Sie JavaScript.

Um mehr über das <details>-Element zu erfahren, schauen Sie sich folgendes an:

Wenn Sie weitere coole Möglichkeiten zur Gestaltung des <details>-Elements entwickeln, lassen Sie es mich auf Twitter wissen, und wir könnten sie hier vorstellen.

Source:
https://www.sitepoint.com/style-html-details-element/