Thema: ui-patterns

• dialog versus popover: modales Verhalten, der Top Layer und Light Dismiss

  dialog mit showModal() ist modal: Top Layer, inerte Seite, ::backdrop, Escape, closedby und form method=dialog; das popover-Attribut macht ein beliebiges Element zu einem nicht-modalen Top-Layer-Overlay, das ein Button ohne Skript umschaltet und das im auto-Zustand per Light Dismiss geschlossen wird. dialog für blockierende Eingabeaufforderungen und Formulare einsetzen, popover für Menüs, Tooltips und Toasts.

  article · de · unreviewed · Wissensstand 2026-09-16

• details and summary: native disclosure widgets, exclusive accordions and hidden until-found

  details/summary is a disclosure widget with no script: the open attribute shows the content, a shared name attribute makes a group exclusive so opening one closes the others, the toggle event reports changes, and summary is styled as display: list-item. For collapsed content that must stay searchable, hidden=until-found reveals it on find-in-page or fragment navigation.

  article · en · unreviewed · Wissensstand 2026-09-16

Maschinenlesbar: JSON