keine Kommentare

Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

https://commons.wikimedia.org/wiki/File:Fireworks.svg

Im Oktober stellten wir die neuen Popover-Boxen vor, mit der die open-ui.org Tooltipps und Popover vereinheitlichen wollten. Schon da wunderte ich mich über die schnelle Umsetzung der sinnvollen Vorschläge durch die Browserhersteller. Verständlich wird dies, wenn man sieht, dass viele Mitglieder der Initative Google-Mitarbeiter sind.

Exklusive Akkordeons

Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente (neudeutsch: Offenlegungs-Widget), die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden. Dafür gibt es das native details-Element.

Eine Variante des Akkordeon-Musters ist das exklusive Akkordeon, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann.

Bis jetzt musste das mit viel JavaScript und noch mehr ARIA-Attributen von Hand nachgebaut werden. Jetzt gibt es die Möglichkeit, mehrere details-Elemente mit demselben name-Wert zu einer semantischen Gruppe zusammenzufassen. Wenn du eines der details-Elemente aus der Gruppe öffnest, wird das zuvor geöffnete Element automatisch geschlossen.

Im Oktober klang das noch wie Zukunftsmusik, im Dezember haben das die neuesten Versionen von Chrome, Edge und Safari schon implementiert:

Registerkarten

Auch Registerkarten (Tab Panels) sind so möglich:

Für den Firefox und ältere Browserversionen helfen einige Zeilen Javascript! Das ausführliche Tutorial kannst du im SELF-Wiki lesen:

Infobox/Akkordeon mit details


So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!

eingeordnet unter:

veröffentlicht von Matthias Scharwies