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 verwenden, wenn Sie Offenlegungs- oder Akkordeon-Widgets erstellen.

Insbesondere ermöglichen die in Chrome 131 eingeführten Änderungen die Verwendung der display-Eigenschaft für diese Elemente. Außerdem wird das Pseudo-Element ::details-content hinzugefügt, um den Teil zu formatieren, der maximiert und minimiert werden kann.

display für das Element <details> festlegen

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

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

Dies wird durch die Verwendung eines Flex-Layouts für das <details>-Element erreicht. Dazu wird das folgende 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 ein unerwartetes Ergebnis haben kann, ist inline. Das liegt nicht daran, dass es nicht funktioniert, sondern an Einschränkungen des HTML-Parsers.

Wenn Sie ein <details>-Element in einen Absatz einfügen, wird der HTML-Parser gezwungen, den offenen Absatz zuerst zu schließen, wie in Abschnitt 13.2.6.4.7 des HTML-Standards definiert:

Ein Start-Tag, dessen Tag-Name einer der folgenden ist: „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 Schaltflächenbereich enthält, schließen Sie ein p-Element. Fügen Sie ein HTML-Element für das Token ein.

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

Beispiel:

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

Wird nach dem Parsen zu:

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

In dieser Demo können Sie sich selbst davon überzeugen, indem Sie das geparste Markup mit den Chrome-Entwicklertools untersuchen.

Das gilt nur für das Einbetten von <details> in ein <p>. Die Verwendung von display: inline für ein <details> in einem <div> funktioniert einwandfrei.

Das Pseudo ::details-content

In Browsern wird das <details>-Element mit Shadow DOM implementiert. Es enthält ein <slot> für die Zusammenfassung (mit einem untergeordneten Standardelement für die Zusammenfassung) und ein <slot> für alle verbleibenden Inhalte, d. h. 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 Anzeigetypen auf <details> kann der Inhalts-Slot jetzt auch mit dem Pseudoelement ::details-content ausgerichtet werden. Mit dieser Pseudoklasse können Sie den Container gestalten, der den Inhalt des <details>-Elements umschließt.

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

Wenn das festgelegte Design nur angewendet werden soll, wenn sich das <details>-Element im offenen Zustand befindet, stellen Sie dem Selektor [open] voran.

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

Es wird empfohlen, das ::details-content-Pseudoelement nur zu formatieren, wenn sich das <details>-Element im Status [open] befindet.

Der Typ display von ::details-content ist im UA-Stylesheet auf block festgelegt, während er zuvor display: contents war. Diese Änderung kann sich in einigen Fällen negativ auf Sie auswirken, z. B. wenn offengelegte Inhalte auf height: 100% basieren. Wenn dies ein Problem für Sie darstellt, können Sie es umgehen, indem Sie den Typ display wieder auf contents setzen, wie hier gezeigt: details[open]::details-content { display: contents; }.

::details-content-Pseudoklasse animieren

Sie können den Inhalt des <details>-Elements animieren, wenn es maximiert wird. Im folgenden Beispiel wird die Breite von 0px auf 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 es sich um eine diskret animierbare Property handelt, benötigen Sie das Schlüsselwort allow-discrete, damit sie funktioniert.

Wenn wir das Ergebnis in die exklusive Akkordeon-Demo einfügen, die wir zuvor geteilt haben, sieht es so aus:

Das height kann auch animiert werden. Wenn Sie height: auto animieren möchten, müssen Sie interpolate-size oder calc-size() verwenden. Um zu verhindern, dass der Inhalt aus dem ::details-content-Pseudoelement herausragt, wenden Sie overflow: clip darauf an.

::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 dieser Demo, die auf dem Akkordeon von Material UI basiert, können Sie den Code in Aktion sehen. Der Inhalt jedes <details>-Elements wird animiert.

In Browsern, die ::details-content nicht unterstützen, funktioniert die Komponente weiterhin einwandfrei. Die Animation wird Besuchern nicht angezeigt.

Funktionserkennung

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

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

Sie können diese Erkennung auch als Indikator dafür verwenden, ob der Browser Ihres Besuchers die zusätzlichen Anzeigewerte unterstützt.

Berücksichtigung der Barrierefreiheit

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

Wie bisher ist das <details>-Element zumindest in Chromium-basierten Browsern und gemäß HTML-Standard durchsuchbar und wird automatisch maximiert, wenn der Browser versucht, zu den verborgenen Inhalten zu scrollen, wenn die Funktionen „Auf Seite suchen“, „ScrollToTextFragment“ und „Elementfragmentnavigation“ verwendet werden. Das ändert sich nicht.

Bevor Sie exklusive Akkordeons verwenden, sollten Sie jedoch überlegen, ob sie für Nutzer hilfreich oder schädlich sind. Wenn Sie ein exklusives Akkordeon verwenden, wird weniger visueller Platz für Inhalte benötigt. Nutzer müssen jedoch möglicherweise viele Elemente öffnen, um alle Informationen zu sehen. Das kann Nutzer frustrieren, die sich mehrere Artikel gleichzeitig ansehen möchten.

Wie sieht es mit dem Stil der Markierung aus?

Derzeit ist die Formatierung des Listenmarkers nicht interoperabel, da es zwei verschiedene Ansätze gibt: einen von Gecko und (aktuell) Chromium und einen von WebKit (der zuvor mit Chromium geteilt wurde).

Sobald die Funktion interoperabel ist, möchten wir Ihnen mehr Kontrolle darüber geben, wie Sie die Markierung gestalten.

Weitere Demos

Zum Schluss noch einige weitere Demos, die Sie sich ansehen können. Alle verwenden ::details-content.

UIKit-Akkordeon

Diese Demo basiert auf dem UIKit-Akkordeon. Der Code ist praktisch derselbe wie das zuvor geteilte Material UI-Akkordeon.

Teilweise geöffnetes Offenlegungs-Widget

In dieser Demo ist ein teilweise geöffnetes Offenlegungs-Widget zu sehen, dessen Inhalt bereits auf dem Bildschirm sichtbar ist. Dazu wird content-visibility immer auf visible festgelegt. Das 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 */
}

Zur besseren Gestaltung wird der Inhalt in ein Wrapper-Div-Element eingeschlossen. Auf das Wrapper-Div-Element werden die Layoutstile wie padding angewendet und das ::details-content-Pseudoelement wird animiert.