Weitere Optionen für den Stil <details>

Bramus

Veröffentlicht: 6. November 2024

Ab Chrome 131 haben Sie mehr Möglichkeiten, die Struktur von <details>- und <summary>-Elementen zu gestalten. Sie können diese Elemente jetzt beim Erstellen von Offenlegungs- oder Akkordeon-Widgets verwenden.

Insbesondere ermöglichen die Änderungen in Chrome 131 die Verwendung der display-Property für diese Elemente und fügen ein ::details-content-Pseudoelement hinzu, um den Teil zu stylen, der maximiert und minimiert wird.

display für das Element <details> festlegen

Bisher war es nicht möglich, den Darstellungstyp des <details>-Elements zu ändern. Diese Einschränkung wurde jetzt aufgehoben. Sie können jetzt beispielsweise Grid- oder Flex-Layouts für das Element <details> verwenden.

Im folgenden Beispiel besteht das exklusive Akkordeon aus mehreren nebeneinander angeordneten <details>-Elementen. Wenn Sie eines der <details>-Elemente maximieren, wird der Inhalt neben dem <summary> platziert.

Dazu wird für das <details>-Element ein Flex-Layout mit dem folgenden CSS verwendet:

details {
  display: flex;
  flex-direction: row;
}

Auch andere Anzeigewerte wie grid sind zulässig.

Hinweis zur Verwendung von display: inline

Ein display-Wert, der zu einem unerwarteten Ergebnis führen kann, ist inline. Nicht, weil es nicht funktioniert, sondern aufgrund von Einschränkungen des HTML-Parsers.

Wenn Sie ein <details>-Element innerhalb eines Absatzes platzieren, wird der HTML-Parser gezwungen, zuerst den offenen Absatz zu schließen, wie in Abschnitt 13.2.6.4.7 des HTML-Standards definiert:

Ein Start-Tag mit einem der folgenden Tag-Namen: „address“, „article“, „aside“, „blockquote“, „center“, „details“, „dialog“, „dir“, „div“, „dl“, „fieldset“, „figcaption“, „figure“, „footer“, „header“, „hgroup“, „main“, „menu“, „nav“, „ol“, „p“, „search“, „section“, „summary“, „ul“

Wenn der Stapel der geöffneten Elemente ein p-Element im Bereich der Schaltfläche enthält, schließen Sie ein p-Element. Fügen Sie ein HTML-Element für das Token ein.

Infolgedessen fließt <details> in die Blockrichtung, unabhängig davon, ob Sie display: inline festgelegt haben.

Beispiel:

<p>Hello <details>…</details> world</p>

Nach dem Parsen sieht es so aus:

<p>Hello </p><details>…</details> world<p></p>

Überzeugen Sie sich selbst in dieser Demo. Untersuchen Sie das geparste Markup mit den Chrome-Entwicklertools.

Hinweis: Dies gilt nur für das Verschachteln von <details> in <p>. Die Verwendung von display: inline auf einem <details> in einem <div> funktioniert einwandfrei.

Die Pseudospalte ::details-content

In Browsern wird das <details>-Element mit Shadow DOM implementiert. Es enthält eine <slot> für die Zusammenfassung (mit einem standardmäßigen untergeordneten Element für die Zusammenfassung) und eine <slot> für alle übrigen Inhalte, also alle untergeordneten Elemente des <details>-Elements mit Ausnahme des <summary>-Elements.

<details>
  ↳ #shadow-root (user-agent)
      <slot id="details-summary">
        <summary>Details</summary>
        <!-- The summary goes here -->
      </slot>
      <slot id="details-content">
        <!-- All content goes here -->
      </slot>
</details>

Neben der Verwendung weiterer Anzeigentypen für <details> kann der Inhalts-Slot jetzt auch über das Pseudo-Element ::details-content ausgerichtet werden. Mit diesem Pseudo können Sie den Container gestalten, der den Inhalt des <details>-Elements umschließt.

details::details-content {
  border: 5px dashed hotpink;
}

Wenn der festgelegte Stil nur angewendet werden soll, wenn das <details>-Element geöffnet ist, stellen Sie ihm den [open]-Selektor voran.

[open]::details-content {
  border: 5px dashed hotpink;
}

Es wird empfohlen, Stile nur dann auf das Pseudo ::details-content anzuwenden, wenn das <details>-Element den Status [open] hat.

Der display-Typ von ::details-content ist im UA-Stylesheet auf block festgelegt, zuvor war es display: contents. Diese Änderung kann sich in einigen Fällen negativ auf dich auswirken, z. B. bei offengelegten Inhalten, die auf height: 100% basieren. Wenn das ein Problem für Sie darstellt, können Sie den display-Typ auf contents zurücksetzen, z. B. so: details[open]::details-content { display: contents; }.

::details-content-Pseudoelement animieren

Sie können den Inhalt des <details>-Elements beim Maximieren animieren. Im folgenden Beispiel wird die Breite von 0px nach 300px animiert.

::details-content {
  transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
  width: 0;
}

[open]::details-content {
  width: 300px;
}

Neben der Umstellung von width muss auch die Property content-visibility umgestellt werden. Das liegt daran, dass sich der Wert zwischen dem ungeöffneten und dem geöffneten Zustand ändert, wie im User-Agent-Stylesheet definiert. Da diese Property nur diskret animiert werden kann, ist das Schlüsselwort allow-discrete erforderlich.

In Kombination mit der zuvor geteilten Akkordeon-Demo sieht das so aus:

Die height kann auch animiert werden. Wenn Sie eine Animation zu height: auto erstellen möchten, müssen Sie interpolate-size oder calc-size() verwenden. Außerdem solltest du overflow: clip anwenden, um zu verhindern, dass der Inhalt über dem Pseudo ::details-content läuft.

::details-content {
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
    height: 0;
    overflow: clip;
}

/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    [open]::details-content {
        height: auto;
    }
}

/* Fallback for browsers with no interpolate-size support */
@supports not (interpolate-size: allow-keywords) {
    [open]::details-content {
        height: 150px;
        overflow-y: scroll; /* In case the contents should be taller than 150px */
    }
}

In der folgenden Demo, inspiriert vom Akkordeon von Material UI, kannst du den Code in Aktion sehen. Die Inhalte der einzelnen <details>-Elemente sind ansprechend animiert.

In Browsern ohne Unterstützung für ::details-content funktioniert die Komponente weiterhin einwandfrei. Das Einzige, was Besucher nicht sehen, ist die Animation.

Funktionserkennung

Verwenden Sie das folgende Snippet, um die Unterstützung für das ::details-content-Pseudoelement in CSS zu prüfen.

@supports selector(::details-content) {
  …
}

Sie können diese Erkennung auch als zuverlässige Prüfung verwenden, um herauszufinden, ob der Browser Ihres Besuchers die zusätzlichen Anzeigenwerte unterstützt oder nicht.

Barrierefreiheit

Die Einführung des Pseudoelements ::details-content und die Möglichkeit, den Darstellungstyp zu ändern, haben keine Auswirkungen auf die Barrierefreiheit des <details>-Elements.

Wie bisher ist das <details>-Element zumindest in Chromium-basierten Browsern und gemäß HTML-Standard durchsuchbar und wird automatisch erweitert, wenn der Browser versucht, als Reaktion auf die Suchfunktion auf der Seite, die ScrollToTextFragment-Navigation und die Navigation zu Elementfragmenten zu seinem ausgeblendeten Inhalt zu scrollen. Das ändert sich nicht.

Bevor Sie jedoch exklusive Akkordeons verwenden, sollten Sie überlegen, ob diese für Nutzer hilfreich oder schädlich sind. Die Verwendung eines exklusiven Akkordeons reduziert zwar die Menge an visuellem Platz, der Inhalt belegt, aber die Nutzenden müssen möglicherweise viele Elemente öffnen, um alle Informationen zu nutzen. Dies kann Nutzende verärgern, die sich mehrere Elemente gleichzeitig ansehen möchten.

Wie sieht es mit dem Stil der Markierung aus?

Derzeit ist das Styling der Listenmarkierung nicht interoperabel, da es zwei unterschiedliche Ansätze gibt: einen von Gecko und (aktuell) Chromium und einen von WebKit (der zuvor mit Chromium geteilt wurde).

Sobald die Funktion interoperabel ist, ist es unser Ziel, Ihnen mehr Kontrolle über den Stil der Markierung zu geben.

Weitere Demos

Zum Abschluss finden Sie hier noch ein paar Demos, die Sie sich ansehen können. Sie verwenden alle ::details-content.

UIKit-Akkordeon

Diese Demo basiert auf dem UIKit-Accordion. Der Code ist praktisch identisch mit dem Akkordeon der Material UI, das wir bereits gesehen haben.

Teilweise geöffnetes Offenlegungs-Widget

In dieser Demo ist ein teilweise geöffnetes Offenlegungs-Widget zu sehen, dessen Inhalt bereits auf dem Bildschirm zu sehen ist. Dazu ist content-visibility immer auf visible festgelegt. Die height wird mit calc-size() animiert, da eine Berechnung erforderlich ist.

::details-content {
  content-visibility: visible; /* Make it always visible */
    
  transition: height 0.5s ease;
  height: 150px;
  overflow: clip;
}

[open]::details-content {
  height: calc-size(auto, size + 0.5rem); /* calc-size because we need to add a length */
}

Für die einfache Formatierung werden die Inhalte in ein Wrapper-Div eingefügt. Auf das Wrapper-Div werden Layoutstile wie padding angewendet und das Pseudo-Element ::details-content wird animiert.