Gestalten Sie HTML <details> und <summary> mit modernem CSS-CSS-Tutorial-php.cn

Geschrieben von Rob O'Leary✏️

Die

und HTML-Elemente, die zusammenfassend als Offenlegungs-Widget bezeichnet werden, sind nicht einfach zu formatieren. Aufgrund der Einschränkungen erstellen Benutzer oft ihre eigene Version mit einer benutzerdefinierten Komponente. Mit der Weiterentwicklung von CSS sind diese Elemente jedoch einfacher anzupassen. In diesem Artikel beschreibe ich, wie Sie das Erscheinungsbild und Verhalten eines Offenlegungs-Widgets anpassen können.

Wie werden
und zusammenarbeiten?

ist ein HTML-Element, das ein Offenlegungs-Widget erstellt, in dem zusätzliche Informationen ausgeblendet sind. Ein Offenlegungs-Widget wird normalerweise als dreieckige Markierung mit etwas Text dargestellt.

Wenn der Benutzer auf das Widget klickt oder sich darauf konzentriert und die Leertaste drückt, wird es geöffnet und zeigt zusätzliche Informationen an. Die Dreiecksmarkierung zeigt nach unten, um anzuzeigen, dass es sich im geöffneten Zustand befindet:

Styling HTML <details> und <summary> mit modernem CSS“ />

<img src=

Wie funktioniert die Offenlegungsanimation?

Zuerst fügen wir interpolate-size hinzu, damit wir zu einer Höhe von auto: übergehen können

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

Nach dem Login kopieren

Als nächstes wollen wir den geschlossenen Stil beschreiben. Wir möchten, dass der „Zusatzinfo“-Inhalt eine Höhe von Null hat und sicherstellen, dass kein Inhalt sichtbar ist, d. h. wir möchten einen Überlauf verhindern.

Wir verwenden das Pseudoelement ::details-content, um auf versteckte Inhalte zu zielen. Ich verwende die Blockgröße-Eigenschaft anstelle der Höhe, da es eine gute Angewohnheit ist, logische Eigenschaften zu verwenden. Wir müssen content-visibility in den Übergang einbeziehen, da der Browser content-visibility:hiden für den Inhalt einstellt, wenn er sich im geschlossenen Zustand befindet – die Abschlussanimation funktioniert nicht, ohne ihn einzuschließen:

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

Nach dem Login kopieren

Die Animation funktioniert immer noch nicht wie erwartet, da die Eigenschaft „Inhaltssichtbarkeit“ eine diskrete animierte Eigenschaft ist. Dies bedeutet, dass keine Interpolation erfolgt; Der Browser wechselt zwischen den beiden Werten, sodass der geänderte Inhalt während der gesamten Animationsdauer angezeigt wird. Wir wollen das nicht.

Wenn wir „transition-behavior:allow-discrete;“ einbeziehen, kehrt sich der Wert ganz am Ende der Animation um, sodass wir unseren allmählichen Übergang erhalten.

Außerdem kommt es zu einem Inhaltsüberlauf, indem wir die Blockgröße auf 0 setzen, wenn sich das Offenlegungs-Widget in einem Zwischenzustand befindet. Wir zeigen den größten Teil des Inhalts beim Öffnen an. Um dies zu verhindern, fügen wir overflow:hiden hinzu.

Zuletzt fügen wir den Stil für den offenen Zustand hinzu. Wir möchten, dass der Endzustand die Größe auto:
hat

details {
    interpolate-size: allow-keywords;
}

Nach dem Login kopieren

Das sind die groben Striche. Wenn Sie eine ausführlichere Videoerklärung bevorzugen, sehen Sie sich die exemplarische Vorgehensweise von Kevin Powell an, um zu erfahren, wie Sie

und .

Gibt es beim Animieren eines Offenlegungs-Widgets weitere Überlegungen?

Das Offenlegungs-Widget kann horizontal wachsen, wenn der Inhalt „Zusätzliche Informationen“ breiter ist als die Inhalt. Dies kann zu einer unerwünschten Layoutverschiebung führen. In diesem Fall möchten Sie möglicherweise eine Breite für

festlegen.

Wie bei jeder Animation sollten Sie Benutzer berücksichtigen, die empfindlich auf Bewegungen reagieren. Sie können die Medienabfrage „Preferences-Reduced-Motion“ verwenden, um diesem Szenario gerecht zu werden:

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

Nach dem Login kopieren

Implementierung eines exklusiven
Gruppe (exklusives Akkordeon)

Ein häufiges UI-Muster ist eine Akkordeonkomponente. Es besteht aus einem Stapel von Offenlegungs-Widgets, die erweitert werden können, um ihren Inhalt anzuzeigen. Um dieses Muster zu implementieren, benötigen Sie lediglich mehrere aufeinanderfolgende

Elemente. Sie können sie so gestalten, dass sie visuell darauf hinweisen, dass sie zusammengehören:

/* open state */
details[open]::details-content {
  block-size: auto;
}

Nach dem Login kopieren

Der Standardstil ist ziemlich einfach:

Eine Variation dieses Musters besteht darin, das Akkordeon exklusiv zu machen, sodass jeweils nur eines der Offenlegungs-Widgets geöffnet werden kann. Sobald einer geöffnet wird, schließt der Browser den anderen. Sie können exklusive Gruppen über das Namensattribut von

erstellen. Der gleiche Name bildet eine semantische Gruppe:

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

Nach dem Login kopieren

Überlegen Sie vor der Verwendung exklusiver Akkordeons, ob dies für Benutzer hilfreich ist. Wenn Benutzer wahrscheinlich mehr Informationen nutzen möchten, müssen sie die Elemente häufig öffnen, was frustrierend sein kann.

Diese Funktion wird derzeit in allen modernen Browsern unterstützt, sodass Sie sie sofort verwenden können.

Gestaltung der Zusammenfassungsmarkierung

Ein Offenlegungs-Widget wird normalerweise mit einer kleinen dreieckigen Markierung daneben angezeigt. In diesem Abschnitt behandeln wir den Prozess der Gestaltung dieses Markers.

Die Markierung ist mit der verknüpft. Element. Das Hinzufügen des Pseudoelements [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) bedeutet, dass wir das Markierungsfeld direkt formatieren können. Allerdings beschränken wir uns auf einen kleinen Satz von CSS-Eigenschaften:

Alle Schriftarteigenschaften
Farbe
Leerzeichen
text-combine-upright, [unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) und Richtungseigenschaften
Inhalt
Alle Animations- und Übergangseigenschaften

Wie bereits erwähnt, ähnelt einem [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li); Es unterstützt die Kurzschrifteigenschaft im Listenstil und ihre Langschrifteigenschaften. Auch wenn das vielleicht ein wenig wirr ist, lassen sich die Gestaltungsoptionen anhand einiger Beispiele leichter verstehen.

Bevor wir uns mit Beispielen befassen, ein kurzes Wort zur Browserunterstützung. Zum Zeitpunkt des Verfassens dieses Artikels ist Safari der einzige große Browser, der das Formatieren des Markers nicht vollständig unterstützt:

Die Safari-Unterstützung ist derzeit auf die Gestaltung der Farb- und Schriftgrößeneigenschaften des ::marker-Pseudoelements beschränkt. Safari unterstützt das nicht standardmäßige Pseudoelement ::-webkit-details-marker
Safari unterstützt das Stylen der Eigenschaften im Listenstil überhaupt nicht. Siehe CanIUse als Referenz

Ändern der Farbe und Größe einer Markierung

Angenommen, wir wollten die Farbe der dreieckigen Markierung in Rot ändern und sie um 50 % vergrößern. Wir können Folgendes tun:

details {
    interpolate-size: allow-keywords;
}

Nach dem Login kopieren

Ändern des Markierungstextes/-bildes

Wenn Sie den Inhalt des Markers ändern möchten, können Sie die content-Eigenschaft des Pseudoelements ::marker verwenden. Basierend auf Ihren Vorlieben können Sie es auf Text einstellen. Für mein Beispiel habe ich das Reißverschluss-Mund-Emoji für den geschlossenen Zustand und das Offener-Mund-Emoji für den geöffneten Zustand verwendet:

details {
    interpolate-size: allow-keywords;
}

Nach dem Login kopieren

Um ein Bild für die Markierung zu verwenden, können Sie die content-Eigenschaft des Pseudoelements ::marker oder die list-style-image-Eigenschaft von

:
verwenden

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

Nach dem Login kopieren

Im folgenden Beispiel verwenden wir zwei Pfeilsymbole von Material Symbols für die Markierung. Der nach rechts zeigende Pfeil steht für den geschlossenen Zustand und der nach unten zeigende Pfeil für den offenen Zustand:

Diese Beispiele funktionieren wie erwartet in Chrome und Firefox, Safari ignoriert die Stile jedoch. Sie können dies als eine schrittweise Verbesserung betrachten und damit Schluss machen. Wenn Sie jedoch in allen Browsern das gleiche Erscheinungsbild wünschen, können Sie die Markierung ausblenden und dann Ihr eigenes Bild als Ersatz hinzufügen. Das gibt Ihnen mehr Freiheit:

/* open state */
details[open]::details-content {
  block-size: auto;
}

Nach dem Login kopieren

Sie können den Status mithilfe eines neuen Markierungssymbols, beispielsweise eines Inline-Bilds oder über Pseudoelemente, visuell anzeigen. Die zeigt bereits (meistens) den Erweiterungs-/Reduzierungsstatus an. Wenn Sie also eine Inline-Grafik verwenden, sollte diese als dekorativ behandelt werden. Ein leeres Alt-Attribut bewirkt Folgendes:

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

Nach dem Login kopieren

Wenn Sie möchten, können Sie die Markierung auch am Ende der positionieren:

details {
    interpolate-size: allow-keywords;
}

Nach dem Login kopieren

Es ist jedoch wichtig zu beachten, dass das Ausblenden der Markierung bei Bildschirmleseprogrammen zu Problemen bei der Barrierefreiheit führt. Firefox, VoiceOver, JAWS und NVDA haben alle ein Problem mit der konsistenten Ankündigung des umgeschalteten Status des Offenlegungs-Widgets, wenn die Markierung entfernt wird. Leider ist der Stil an den Staat gebunden. Es ist besser, dies zu vermeiden.

Gestalten Sie den Abschnitt „Zusätzliche Informationen“ von

Vielleicht möchten Sie den Abschnitt „Zusätzliche Informationen“ des Offenlegungs-Widgets formatieren, ohne Stile in die zu verlieren. Da Sie eine variable Anzahl von Elementen in einem

haben können, wäre es schön, eine Sammelregel zu haben:

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

Nach dem Login kopieren

Mein Ziel ist es, die Element mit der Funktion :not(). Bedenken Sie jedoch, dass dies auf jedes Element und nicht auf den Inhalt als einzelnen Abschnitt abzielt!

/* open state */
details[open]::details-content {
  block-size: auto;
}

Nach dem Login kopieren

Styling HTML <details> und <summary> mit modernem CSS“ /> 

Alternativ können Sie das Pseudoelement ::details-content verwenden, das auf den gesamten Abschnitt abzielt. Aus diesem Grund möchten Sie dies zum Animieren der Öffnungs- und Schließzustandsübergänge verwenden: 


<pre class= >@media (prefers-reduced-motion) { /* styles to apply if a user's device settings are set to reduced motion */ details::details-content { transition-duration: 0.8s; /* slower speed */ } }