Hier erfährst du, wie die sehr nützlichen Details und Zusammenfassungselemente funktionieren und wo du sie verwenden kannst.
Ein Offenlegungs-Widget ist ein Steuerelement auf der Benutzeroberfläche, über das Inhalte ausgeblendet und angezeigt werden. Wenn Sie dies auf web.dev lesen und Ihr Darstellungsbereich weniger als 106 em breit ist, können Sie durch Klicken auf „Auf dieser Seite“ über diesem Absatz das Inhaltsverzeichnis für diesen Abschnitt einblenden. Wenn Sie es nicht sehen, verkleinern Sie den Browser, damit die Inhaltsverzeichnisnavigation auf dieser Seite als Offenlegungs-Widget angezeigt wird.
Die grafische Benutzeroberfläche accordion besteht aus einer Reihe vertikal gestapelter Offenlegungs-Widgets. Ein häufiger Anwendungsfall für die Akkordeon-Benutzeroberfläche ist die Seite mit häufig gestellten Fragen (FAQs) auf vielen Websites. Eine Akkordeon-FAQ enthält eine Liste sichtbarer Fragen. Durch Klicken auf eine Frage wird die Antwort auf diese Frage maximiert bzw. wird angezeigt.
jQuery enthält seit mindestens 2009 ein Akkordeon-UI-Muster. Die ursprüngliche JavaScript-kostenlose Akkordeon-Lösung bestand darin, dass für jede FAQ-Frage <label> gefolgt von einem Häkchen gesetzt wurde. Anschließend wurde die Antwort <div> angezeigt, wenn das Häkchen gesetzt wurde. Das CSS sah in etwa so aus:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
Warum diese Geschichte? Offenlegungs-Widgets wie Akkordeons ohne JavaScript- oder Formularsteuerungs-Hacks wurden relativ neu hinzugefügt. Die Elemente <details> und <summary> werden erst seit Januar 2020 in allen modernen Browsern vollständig unterstützt. Sie können jetzt funktionierende, wenn auch weniger ansprechende Offenlegungs-Widgets erstellen, wenn Sie nur semantisches HTML verwenden. Sie benötigen lediglich die Elemente <details> und <summary>: Sie sind eine integrierte Methode zum Maximieren und Minimieren von Inhalten. Wenn ein Nutzer auf <summary> klickt oder tippt oder die Eingabetaste loslässt, wenn <summary> im Fokus ist, wird der Inhalt der Ein/Aus-Schaltfläche für das übergeordnete Element <details> sichtbar.
Wie bei allen semantischen Inhalten können Sie die Standardfunktionen und das Erscheinungsbild schrittweise verbessern. In diesem Fall wurde nur ein kleines CSS hinzugefügt, sonst nichts:
Diese Codepens enthalten kein JavaScript.
Sichtbarkeit aktivieren/deaktivieren: Attribut open
Das <details>-Element ist der Container für das Offenlegungs-Widget. Das <summary> ist die Zusammenfassung oder Legende für das übergeordnete <details>. Die Zusammenfassung wird immer angezeigt und fungiert als Schaltfläche, mit der Sie die Anzeige der übrigen Inhalte des übergeordneten Elements ein-/ausschalten können. Wenn Sie mit <summary> interagieren, wird die Anzeige von gleichgeordneten Zusammenfassungen mit selbstbeschrifteten Zusammenfassungen ein- und ausgeschaltet. Dazu können Sie das Attribut open des Elements <details> umschalten.
Das Attribut open ist ein boolesches Attribut. Falls vorhanden, bedeutet das, dass dem Nutzer alle <details>-Inhalte angezeigt werden, unabhängig von ihrem Wert oder dem Fehlen. Wenn das Attribut open nicht vorhanden ist, wird nur der Inhalt von <summary> angezeigt.
Da das Attribut open bei der Interaktion des Nutzers mit dem Steuerelement automatisch hinzugefügt und entfernt wird, kann es in CSS verwendet werden, um das Element je nach Zustand unterschiedlich zu gestalten.
Du kannst ein Akkordeon aus einer Liste mit mehreren <details>-Elementen mit jeweils einem untergeordneten <summary>-Element erstellen. Wird das open-Attribut im HTML-Code weggelassen, wird der gesamte <details> minimiert oder geschlossen, wobei beim Laden der Seite nur die Zusammenfassungsüberschriften sichtbar sind. Jede Überschrift öffnet den Rest der Inhalte im übergeordneten <details>. Wenn du das Attribut open in die HTML einfügst, wird <details> beim Laden der Seite maximiert gerendert und der Inhalt ist sichtbar.
Der ausgeblendete Inhalt im minimierten Zustand ist in einigen Browsern suchbar, in anderen jedoch nicht, obwohl der minimierte Inhalt nicht Teil des DOM ist. Wenn Sie in Edge oder Chrome suchen, werden die Details mit einem Suchbegriff erweitert und das Vorkommen angezeigt. Dieses Verhalten wird in Firefox oder Safari nicht repliziert.
Das <summary>-Element muss das erste untergeordnete Element eines <details>-Elements sein, das eine Zusammenfassung, einen Untertitel oder eine Legende für den Rest des Inhalts des übergeordneten <details>-Elements darstellt, in das es verschachtelt ist. Der Inhalt des <summary>-Elements kann ein beliebiger Überschrifteninhalt, nur Text oder HTML sein, der in einem Absatz verwendet werden kann.
Zusammenfassungsmarkierung wechseln
In den beiden vorherigen Codepens befindet sich der Pfeil neben inline-start der Zusammenfassung. Ein Offenlegungs-Widget wird in der Regel mithilfe eines kleinen Dreiecks auf dem Bildschirm dargestellt, das sich dreht oder sich dreht, um den offenen/geschlossenen Status anzuzeigen. Neben dem Dreieck befindet sich ein Label. Der Inhalt des <summary>-Elements kennzeichnet das Offenlegungs-Widget.
Der rotierende Pfeil oben in jedem Abschnitt ist ein ::marker, der für das <summary>-Element festgelegt wurde. Wie bei Listenelementen unterstützt das <summary>-Element die Kurzschreibweise list-style und ihre Langhandeigenschaften, einschließlich list-style-type.
Sie können das Dreieck für die Offenlegung mit CSS gestalten und beispielsweise die Markierung von einem Dreieck in einen anderen Aufzählungszeichentyp ändern, einschließlich eines Bildes mit list-style-image.
Wenn Sie andere Stile anwenden möchten, verwenden Sie eine Auswahl ähnlich wie details summary::marker. Für das Pseudoelement ::marker ist nur eine begrenzte Anzahl von Stilen zulässig. Üblicherweise wird das ::marker entfernt und durch das einfacher zu gestaltende ::before ersetzt, wobei CSS-Stile den Stil der generierten Inhalte je nach Vorhandensein (oder Fehlen) des offenen Attributs leicht ändern. Sie können das Symbol für das Offenlegungs-Widget entfernen, indem Sie list-style: none festlegen oder den Inhalt der Markierung auf none setzen. Achten Sie aber immer darauf, dass sehende Nutzer durch eine entsprechende optische Kennzeichnung darauf hingewiesen werden, dass die Zusammenfassung eine Ein-/Aus-Schaltfläche ist, mit der Inhalte nach der Aktivierung ein- und ausgeblendet werden.
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
In diesem Beispiel wird die Standardmarkierung entfernt und generierte Inhalte werden hinzugefügt, um ein + zu erstellen, wenn die Details geschlossen sind, und ein -, wenn die Details geöffnet sind.
Wenn der Detailblock standardmäßig geöffnet werden soll, füge das open-Attribut im öffnenden <details>-Tag ein. Sie können auch einen Abstand zwischen den einzelnen Dialogfeldern einfügen und die Rotation der mit generierten Inhalten erstellten Markierung umstellen, um das Aussehen zu verbessern:
Fehlerbehandlung
Wenn Sie kein <summary> einfügen, erstellt der Browser eines für Sie: mit einer Markierung und dem Wort „Details“. Diese Zusammenfassung ist Teil eines Schattenstamms. Daher werden keine CSS-Zusammenfassungsstile des Autors angewendet. Leider enthält Safari nicht die Details für die Reihenfolge des Tastaturfokus.
Wenn Sie ein <summary> einfügen, es aber nicht das erste Element im <details>-Element ist, zeigt der Browser die Zusammenfassung trotzdem wie gewünscht an. Er schlägt auch nicht fehl, wenn Sie einen Link, ein Label oder ein anderes interaktives Element in die Zusammenfassung einfügen, Browser verarbeiten interaktive Inhalte innerhalb interaktiver Inhalte jedoch anders. Wenn Sie beispielsweise einen Link in eine Zusammenfassung einfügen, fügen einige Browser sowohl die Zusammenfassung als auch den Link der Standard-Tab-Reihenfolge hinzu, andere Browser konzentrieren sich dagegen nicht standardmäßig auf den Link.
Wenn Sie auf ein <label> klicken, das in einem <summary> verschachtelt ist, legen einige Browser den Fokus auf das zugehörige Formularsteuerelement, andere wiederum legen den Fokus auf das Formularsteuerelement und aktivieren bzw. schließen <details>.
Die HTMLDetailsElement-Schnittstelle
Wie alle HTML-Elemente übernimmt HTMLDetailsElement alle Eigenschaften, Methoden und Ereignisse von HTMLElement und fügt die Instanzeigenschaft open sowie ein toggle-Ereignis hinzu. Das Attribut HTMLDetailsElement.open ist ein boolescher Wert, der das HTML-Attribut open widerspiegelt und angibt, ob der Inhalt des Elements (ohne <summary>) dem Nutzer angezeigt werden soll. Das Ereignis wird ausgelöst, wenn das Element <details> geöffnet oder geschlossen wird. Sie können sich dieses Ereignis mit addEventListener() anhören.
Wenn Sie ein Script schreiben möchten, mit dem die geöffneten Details geschlossen werden, wenn der Nutzer andere Details öffnet, entfernen Sie das geöffnete Attribut mit removeAttribute("open"):
Dies ist das einzige Beispiel, in dem JavaScript verwendet wird. Sie benötigen wahrscheinlich kein JavaScript, mit Ausnahme der Funktion zum Schließen anderer geöffneter Offenlegungs-Widgets.
Denken Sie daran, dass <details> und <summary> stark gestaltet werden können und sogar zum Erstellen von Tooltipps verwendet werden können.
Wenn Sie diese semantischen Elemente für Anwendungsfälle verwenden möchten, in denen die native Semantik nicht übereinstimmt, muss immer die Barrierefreiheit aufrechterhalten werden.
HTML ist zum größten Teil standardmäßig zugänglich. Unsere Aufgabe als Entwickler ist es, dafür zu sorgen, dass unsere Inhalte weiterhin zugänglich sind.
Wissen testen
Testen Sie Ihr Wissen über Details und Zusammenfassungen.
Das <summary> muss das erste untergeordnete Element welches Elements sein?
<p><details><fieldset>