Details und Zusammenfassung

Finden Sie heraus, wie die sehr nützlichen Details und Zusammenfassungselemente funktionieren und wo Sie diese verwenden können.

Ein Offenlegungs-Widget ist ein Steuerelement auf der Benutzeroberfläche, mit dem Inhalte ein- und ausgeblendet werden. Wenn Sie dies auf web.dev lesen wenn der Darstellungsbereich weniger als 106 Meter breit ist, über diesem Absatz wird das Inhaltsverzeichnis für diesem Abschnitt. Falls das Inhaltsverzeichnis nicht angezeigt wird, verkleinern Sie den Browser, damit die Inhaltsverzeichnisnavigation auf dieser Seite als Offenlegungs-Widget.

Die grafische Benutzeroberfläche Akkordeon besteht aus mehreren vertikal gestapelten 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 FAQ zu Akkordeons enthält eine Liste sichtbarer Fragen. Durch Klicken auf eine Frage wird die Antwort auf diese Frage erweitert bzw. „offengelegt“.

jQuery enthält seit mindestens 2009 ein Akkordeon-UI-Muster. Die ursprüngliche JavaScript-Version ohne Für jede Frage mit Akkordeon wurde in den häufig gestellten Fragen ein <label>, gefolgt von einem Häkchen mit der Bezeichnung und die Schaltfläche <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 die Geschichte? Offenlegungs-Widgets wie Akkordeons ohne JavaScript oder Hacks sind relativ neu Addition; <details> und <summary> -Elemente werden erst seit Januar 2020 in allen modernen Browsern vollständig unterstützt. Sie können jetzt funktionierende, wenn auch als attraktive Offenlegungs-Widgets, die ausschließlich semantisches HTML verwenden. Sie benötigen nur die Elemente <details> und <summary>: Mit ihnen können Sie Maximieren und Minimieren von Inhalten. Wenn ein Nutzer auf <summary> klickt oder tippt oder die Eingabetaste loslässt, wenn <summary> hervorgehoben ist, wird der Inhalt der übergeordneten <details> eingeblendet.

Wie bei allen semantischen Inhalten können Sie die Standardfunktionen und das Erscheinungsbild schrittweise verbessern. In diesem Fall wird ein kleines CSS wurde hinzugefügt, sonst nichts:

Diese Codepens enthalten kein JavaScript.

Sichtbarkeit ändern: das Attribut open

Das Element <details> ist der Container des Offenlegungs-Widgets. <summary> ist die Zusammenfassung oder Legende für das übergeordnete Element <details>. Die Zusammenfassung wird immer angezeigt und fungiert als Schaltfläche, die die Anzeige des restlichen Inhalts des übergeordneten Elements ein-/ausschaltet. Interagieren über die Schaltfläche „<summary>“ wird die Anzeige aller gleichgeordneten Elemente mit Label „Zusammenfassung“ durch Umschalten von <details> umgeschaltet. open-Attributs des Elements hinzu.

Das Attribut open ist ein boolesches Attribut. Wenn vorhanden, unabhängig von dem Wert oder dem Fehlen, zeigt dies an, dass alle <details> werden dem Nutzer präsentiert. Wenn das Attribut open nicht vorhanden ist, wird nur der Inhalt von <summary> angezeigt.

Da das Attribut open automatisch hinzugefügt und entfernt wird, während der Nutzer mit dem Steuerelement interagiert, kann es in CSS für folgende Aktionen verwendet werden: das Element je nach Zustand unterschiedlich gestalten.

Du kannst ein Akkordeon mit einer Liste von mehreren <details>-Elementen erstellen, die jeweils ein untergeordnetes <summary>-Element haben. Attribut open weglassen Im HTML-Code bedeutet das, dass das <details>-Element minimiert oder geschlossen wird, wobei nur die Zusammenfassungsüberschriften sichtbar sind, wenn die Seite geladen wird. Jede Überschrift stellt den Anfang des Inhalts im übergeordneten <details> dar. Wenn du das Attribut open in deinen HTML-Code einfügst, wird der <details> wird beim Laden der Seite maximiert gerendert und der Inhalt ist sichtbar.

Der ausgeblendete Inhalt im minimierten Zustand kann in einigen Browsern gesucht werden, in anderen jedoch nicht, obwohl der minimierte Inhalt ist nicht Teil des DOM. Wenn du in Edge oder Chrome suchst, werden die Details zu einem Suchbegriff erweitert und für das Auftreten des Auftretens. Dieses Verhalten wird in Firefox oder Safari nicht repliziert.

Die <summary> muss das erste untergeordnete Element eines <details>-Elements sein und steht für eine Zusammenfassung, einen Untertitel oder eine Legende für den Rest des Inhalts des übergeordneten <details>-Elements, in dem es verschachtelt ist. Der Inhalt des <summary>-Elements kann eine beliebige Überschrift sein nur Text oder HTML, die innerhalb eines Absatzes verwendet werden können.

Zusammenfassungsmarkierung umschalten

In den beiden vorherigen Codepens sehen Sie den Pfeil neben inline-start Seite der Zusammenfassung. Ein Offenlegungs-Widget wird in der Regel mit einem kleinen Dreieck auf dem Bildschirm dargestellt, das sich dreht oder gedreht wird. , um den Status „Offen“ oder „Geschlossen“ anzugeben. Neben dem Dreieck wird ein Label angezeigt. Mit dem Inhalt des Elements <summary> wird das Offenlegungs-Widget gekennzeichnet. Der rotierende Pfeil oben in jedem Bereich ist ein ::marker, der auf der Seite <summary>-Element. Wie Listenelemente unterstützt das Element <summary> das list-style Shorthand-Property und ihre Long-Hand-Attribute, einschließlich list-style-type Sie können das Offenlegungsdreieck mit CSS gestalten und beispielsweise die verwendete Markierung von einem Dreieck in einen anderen Aufzählungspunkttyp ändern, einschließlich ein Bild mit list-style-image

Wenn Sie andere Stile anwenden möchten, verwenden Sie einen Selektor wie details summary::marker. Die Für ::marker pseudo-element ist nur eine begrenzte Anzahl von Stilen zulässig. Entfernen des ::marker und ersetzt es durch das nutzerfreundlichere ::before, Bei CSS-Stilen ändert sich der Stil der generierten Inhalte je nach Vorhandensein oder Fehlen geringfügig. des offenen Attributs. Du kannst das Symbol für das Offenlegungs-Widget entfernen, indem du list-style: none festlegst oder Inhalte festlegst der Markierung zu none, aber fügen Sie immer visuelle Indikatoren hinzu, um sehende Nutzer darauf hinzuweisen, dass es sich bei der Zusammenfassung um eine Ein/Aus-Schaltfläche handelt. Schaltfläche, 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 generierter Inhalt hinzugefügt, um eine + zu erstellen, wenn die Details geschlossen sind, und ein - wenn die Details offen sind.

Wenn der Detailblock standardmäßig geöffnet sein soll, fügen Sie das Attribut open in das öffnende <details>-Tag ein. Sie können auch zwischen den einzelnen Dialogfeldern und wechseln Sie die Drehung der Markierung, die mit generierten Inhalten erstellt wurde, um die Darstellung zu verbessern:

Fehlerbehandlung

Wenn Sie kein <summary> einfügen, wird im Browser eines mit einer Markierung und dem Wort „Details“ erstellt. Diese Zusammenfassung ist Teil eines Shadow-Stamms und daher werden keine Autoren-CSS-Zusammenfassungsstile angewendet. Leider bietet Safari keine Details zur Reihenfolge der Tastaturfokus.

Wenn Sie ein <summary> einfügen, es aber nicht das erste Element im <details> ist, zeigt der Browser trotzdem die Zusammenfassung an. wie es sein sollte. Sie schlägt auch fehl, wenn Sie einen Link, ein Label oder ein anderes interaktives Element in die Zusammenfassung aufnehmen, aber Browser Interaktive Inhalte in interaktiven Inhalten anders handhaben. Wenn Sie beispielsweise einen Link in eine Zusammenfassung einfügen, fügt sowohl die Zusammenfassung als auch den Link zur Standard-Tab-Reihenfolge hinzu, aber andere Browser konzentrieren sich nicht standardmäßig auf den Link. Wenn Sie auf ein <label> klicken, das in einem <summary> verschachtelt ist, wird in einigen Browsern das zugehörige Formularsteuerelement hervorgehoben. andere Browser wird auf das Formularsteuerelement fokussiert und <details> wird geöffnet oder geschlossen.

Die HTMLDetailsElement-Schnittstelle

Wie alle HTML-Elemente übernimmt HTMLDetailsElement alle Eigenschaften, Methoden und Ereignissen aus HTMLElement und fügt die open-Instanzattribut und toggle . Das Attribut HTMLDetailsElement.open ist ein boolescher Wert der das HTML-Attribut open widerspiegelt und angibt, Gibt an, ob die Inhalte des Elements (ohne <summary>) dem Nutzer angezeigt werden sollen. Das Ereignis „Umschalt“ wurde ausgelöst. Das <details>-Element ist geöffnet oder geschlossen. Sie können sich dieses Ereignis mit addEventListener() anhören.

Wenn Sie ein Skript schreiben möchten, um die geöffneten Details zu schließen, wenn der Nutzer andere Details öffnet, entfernen Sie das Attribut „offen“. mit removeAttribute("open"):

Dies ist das einzige Beispiel für die Verwendung von JavaScript. Wahrscheinlich benötigen Sie kein JavaScript, außer für die Funktionalität zum Schließen Offenlegungs-Widgets geöffnet.

Denken Sie daran, dass <details> und <summary> stark gestaltet und sogar zum Erstellen von Kurzinfos verwendet werden können. Wenn Sie diese semantischen Elemente jedoch für Anwendungsfälle verwenden möchten, in denen die native Semantik nicht übereinstimmt, sollten Sie immer darauf achten, die Barrierefreiheit beizubehalten. HTML ist größtenteils standardmäßig verfügbar. Unsere Aufgabe als Entwickler ist es, dafür zu sorgen, dass unsere Inhalte immer zugänglich sind.

Wissen testen

Testen Sie Ihr Wissen über Details und Zusammenfassungen.