Gott segne das <details> Element. Wirf etwas Inhalt hinein und du hast eine zugängliche "Mehr anzeigen"-Interaktion mit fast null Aufwand.
Wirf ein <summary> hinein, um den Text des Expanders anzupassen.
Funktioniert hervorragend für FAQs.
Es gibt wirklich keine Grenzen, wie Sie diese gestalten können. Wenn Ihnen der Standard-Fokusring nicht gefällt, können Sie ihn entfernen, aber stellen Sie sicher, dass Sie irgendeine Art von Stil wieder hinzufügen.
Hier habe ich ein Header-Element für jeden erweiterbaren Abschnitt verwendet, das einen Fokus-Zustand hat, der andere interaktive Elemente auf der Seite nachahmt.
Die einzigen Browser, die dies nicht unterstützen, sind die von Microsoft (und Opera Mini, was sinnvoll ist – es ist nicht wirklich interaktiv).
Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 12 | 49 | Nein | 79 | 6 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4 | 6.0-6.1 |
Aber selbst dann ist es, als ob alle Abschnitte geöffnet wären, also ist es keine große Sache
Möchten Sie das Standarddreieck gestalten? Seltsamerweise geschieht dies auf die übliche Weise über die Eigenschaften von list-style. Aber Blink-basierte Browser haben das noch nicht umgesetzt, daher haben sie einen proprietären Weg, dies zu tun. Sie können jedoch kombiniert werden. Hier ist ein Beispiel für den Ersatz durch ein Bild
summary {
list-style-image: url(right-arrow.svg);
}
summary::-webkit-details-marker {
background: url(right-arrow.svg);
color: transparent;
}Leider drehen sie sich nicht, und es gibt auch keine Möglichkeit, das Standarddreieck zu animieren. Eine Idee könnte sein, den :focus-Zustand anzusprechen und Hintergründe zu tauschen
Aber das scheint auf WebKit und Blink beschränkt zu sein, und selbst dann kehrt der Pfeil zurück, sobald das Element den Fokus verliert, auch wenn es noch erweitert ist.
Barrierefreiheit (Accessibility)
- Wissen Sie, dass das
<summary>-Element die Semantik anderer Elemente darin auslöscht. Denken Sie also nicht, dass Sie ein<h3>oder etwas Ähnliches hineinlegen können und Screenreader es erfassen, denn das werden sie nicht. Dave hat mehr Details. - Adrian hat auch einen Artikel darüber, wie Details/Zusammenfassung möglicherweise kein guter Ersatz für eine Vielzahl von Interaktionsmustern ist.
Es sieht so aus, als ob das Microsoft Edge-Team an der Implementierung des „details“-Tags arbeitet. Hoffentlich sehen wir es in der nächsten Version. Wenn Sie den Druck noch etwas erhöhen möchten, können Sie die Feature-Anfrage hier hochwählen
https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261266-details-summary-elements
Das Edge-Team scheint hochgewählte Feature-Anfragen aktiv zu entwickeln.
Sie arbeiten seit Mai 2017 daran... Ich bin mir leider nicht sicher, wie aktiv das wirklich entwickelt wird.
Es ist schade, dass MS diese Elemente nicht unterstützt hat. Ich habe in IE11 festgestellt, dass sie inline erscheinen. Obwohl sie in IE11 „erweitert“ werden (ich schätze, das ist ein Gewinn für progressive Enhancement, oder?), sind sie zu einem umständlichen Absatzblock zusammengeschoben. Das Hinzufügen von display: block sowohl zu den details- als auch zu den summary-Elementen in CSS lässt die Dinge so aussehen, wie man es erwarten würde; übereinander gestapelt, wie es sich für kleine Blöcke gehört.
Gut zu wissen! Was den :focus-Trick angeht, können Sie stattdessen so etwas wie
details[open] > summaryverwenden, um das Aussehen des Pfeils zu ändern, wenn er erweitert ist.Anstatt :focus zu verwenden, um zu bestimmen, ob die Pfeile gedreht werden sollen, können Sie das Attribut „open“ verwenden. Ich habe es in Chrome, Firefox und Safari getestet, und sie scheinen es alle zu unterstützen.
Hier ist ein Fork Ihres Pens, der die Aktualisierung zeigt: https://codepen.io/thomashigginbotham/pen/aYqvqQ?editors=1100
Eine Möglichkeit, den Pfeil zu animieren, besteht darin, ihn vollständig selbst im
::before-Pseudo-Element der Zusammenfassung für den Standard- und den[open]-Zustand neu zu erstellen. Fügen Sie dann einfach einen Übergang zwischen diesen beiden hinzu, deaktivieren Sie die Standardgestaltung des Browsers und fertig.Habe dies nicht in anderen Browsern getestet, aber mit dem Open-Attribut-Selektor funktionieren die Pfeile wie beabsichtigt in Chrome und Firefox auf diesem Pen: https://codepen.io/cfryant/pen/dmdXJE
Sie können das open-Attribut anstelle von focus verwenden
details[open] summary{
list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/down-arrow.svg);
}
Ich bevorzuge es auch, transform: rotate(90deg); zu verwenden, wo immer möglich, anstatt ein neues Bild zu laden.
Ich habe eine sehr Liebe/Hass-Beziehung mit Details & Zusammenfassung.
Ja, es ist großartig, ein natives, zugängliches Widget für ein so gängiges Verhalten zu haben.
Aber:
Sie können das grundlegende Verhalten mit dem CSS-Modell nicht beschreiben. Der Teil, der ein- und ausblendet, ist in keinem bestimmten Element.
Das bedeutet, dass es keine Möglichkeit gibt, eine Media-Query-Überschreibung zu implementieren, die besagt, dass diese immer angezeigt werden soll, wenn der Bildschirm groß genug ist. Daher ersetzt es nicht alle Ihre Show/Hide-Navigations-Widgets.
Da open/closed über ein einfaches Attribut erfolgt und es keine Pseudoklasse gibt, benötigen Sie möglicherweise eine Skriptunterstützung, wenn Sie (a) einige Elemente standardmäßig geöffnet haben und (b) Stile für offen und geschlossen ändern möchten, damit Ihre
details[open]-Selektoren nicht in nicht unterstützenden Browsern übereinstimmen.Außerdem erlauben Chrome und Webkit derzeit nicht, das kleine Pfeil-Widget zu gestalten. In Firefox ist es eine Listenmarkierung, und das ist es, was die Spezifikation jetzt sagt, also sollte es besser werden.
Hier ist eine weitere Idee für den Pfeil-Umschalter
Was den letzten Teil angeht, können Sie ein offenes
<details>-Element über den[open]-Selektor gestaltenDas ist wirklich cool, es ist schade, dass IE das nicht unterstützt.
Danke. Obwohl dies in der Tat eine einfache Möglichkeit ist, eine kollabierbare Komponente zu erstellen, gibt es einen Fehler in Safari, der ernsthafte Website-Rendering-Probleme verursacht, wenn Sie die Elemente
<details>und<summary>zusammen mitrem-Werten für die Einstellung derfont-sizeverwenden. Sehen Sie https://bugs.webkit.org/show_bug.cgi?id=173876 für weitere Informationen dazu.Um benutzerdefinierte Pfeile zu drehen und zu animieren, scheint Folgendes zumindest in Chrome zu funktionieren
Ein kleines Problem mit Details. Ich konnte bisher die Höhe des Details-Elements beim Klicken auf die Zusammenfassung nicht animieren/überblenden. Habe sogar danach gegoogelt. Keine saubere Lösung für dieses Problem gefunden. Die Mächtigen wollen nur Animationen. Semantik zum Teufel.
Chris, ich glaube, es gibt immer noch Barrierefreiheitsprobleme mit diesen Elementen?
Sicher, sie sind mit der Tastatur fokussierbar, aber selbst das W3C empfiehlt ein anderes Markup-Muster + ARIA für die Barrierefreiheit von Screenreadern – siehe https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
Man kann den Standardpfeil nicht animieren, aber man kann ein Pseudo-Element animieren
https://jsfiddle.net/Skateside/kfmvdh7k/
Hier ist ein Polyfill, das ich für IE/Edge gefunden habe
Details Element Polyfill 2.0.1
Copyright © 2018 Javan Makhmali
https://github.com/javan/details-element-polyfill
Funktioniert wie erwartet.
HTML5 Doctor hat ein Beispiel und eine Erklärung zur Verwendung des :after-Pseudo-Elements, um den Pfeil zu ersetzen.
Erinnert mich stark an Definitionslisten (dl, dd + dt). Daher ist es für mich völlig logisch, dass die Gestaltung auch listenbezogen ist :)
cu, w0lf.
W3C: Wir brauchen hier einige Pseudoselektoren.
:open {}
:closed {}
Was sind die Vorteile dieser Funktion im Vergleich zum Checkbox-Hack? Checkboxen sind mit einer größeren Bandbreite von Browsern kompatibel, haben ein klar definiertes Verhalten bei Tastatursteuerung und unterstützen eine Reihe von Pseudoselektoren. Die Checkbox kann unabhängig von ihrem Label in einem anderen Layout-Container platziert werden, um komplexe Steuerelemente zu erstellen. Sie können sie sogar mit Formularen kombinieren, um eine komplett JavaScript-freie Logik zu erstellen, basierend auf dem aktuellen Zustand des Steuerelements. Im Vergleich dazu ist diese Funktion unflexibel und erfordert JavaScript für nicht triviale Anwendungen.
Der Vorteil ist die einfache Handhabung. Sehen Sie, wie wenig Markup es im Vergleich zu anderen Methoden erfordert!
Und das ist eigentlich auch der Punkt des Beitrags: Es ist der *einfachste* Weg aller Zeiten (d.h. erfordert keine Hacks), aber es liegt noch ein langer Weg vor uns, bis es der *am weitesten verbreitete* Weg aller Zeiten ist.