neue HTML-Elemente accordion, popover und selectlist

[Matthias Scharwies]

Guten Morgen,

zugegeben, der Titel war Clickbait!

Ich hatte 2022 schon mal die open-ui.org vorgestellt^[1] und bin über den Thread mit den zwei „Pfeil-Buttons“ dran erinnert worden. Es überschneidet sich ein bisschen mit der Diskussion hier: Button mit Text-Alert und Textfeld.

open-ui.org will die Lücke zwischen den „normalen“ HTML-Elementen und custom elements schließen, indem sie Lösungen für einzelne, immer wieder vorkommende und in allen Frameworks ein bisschen anders realisierte Probleme entwickeln und diese dann per pull request an die Browserhersteller übergibet

Popover

• https://open-ui.org/components/popover.research.explainer/
• https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.

bietet ein

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

Was ist der Unterschied zu dialog?^[2] dialog ist modal - alles wird gestoppt; das Popover ist nur wie ein Tooltip. Wie würdet ihr inert übersetzen?

Fazit: kein neues HTML-Eement, aber ein neues UI-Element - und es läuft in allen Browsern, außer Firefox (flag)!

Das soll dann als popover-hint, was nach n-sec wieder von alleine verschwindet, erweitert werden. (https://open-ui.org/components/popover-hint.research.explainer/)

Exclusive Accordion (Explainer)

• https://open-ui.org/components/accordion.explainer/

Mehrere details werden über ein name-Attribut miteinander verbunden (so wie radio buttons), damit nur eines geöffnet bleibt. (Nur beim Drucken werden alle geöffnet - cool nicht?))

selectlist

The <select> element does not provide enough customization for web developers, which leads them to implement their own. These implementations can lead to reduced performance, reliability, and accessibility compared to the native form control elements.

und deshalb soll ein neues Eement selectlist kommen, das neben den option-Elementen auch einen Öffnen-Button und Erklärungen beinhaltet. Mal schau'n.

Herzliche Grüße

Matthias Scharwies

---

1. open-ui.org stellt Popup vor (war: CSS-Flyout-Menü) am 09.07.2022 ↩︎

2. Dialogs and popovers seem similar. How are they different? ↩︎