neue HTML-Elemente accordion, popover und selectlist
bearbeitet von Matthias ScharwiesGuten Morgen,
zugegeben, der Titel war *Clickbait*!
Ich hatte 2022 schon mal die [open-ui.org](https://open-ui.org/) vorgestellt[^1] und bin über den Thread mit den zwei „Pfeil-Buttons“ dran erinnert worden.
[^1]: [open-ui.org stellt Popup vor (war: CSS-Flyout-Menü)](https://forum.selfhtml.org/self/2022/may/28/fragen-zum-css-flyout-menu/1800359#m1800359 ) am 09.07.2022
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
~~~ HTML
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
~~~
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
--
Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht.
Er hat vergessen, dass er im gleichen Zeitraum auch heiratet.
Also für Interessierte:
Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten.
Ihr Name ist Sandra.
neue HTML-Elemente accordion, popover und selectlist
bearbeitet von Matthias ScharwiesGuten Morgen,
zugegeben, der Titel war *Clickbait*!
Ich hatte 2022 schon mal die [open-ui.org](https://open-ui.org/) vorgestellt[^1] und bin über den Thread mit den zweil „Pfeil-Buttons“ dran erinnert worden.
[^1]: [https://forum.selfhtml.org/self/2022/may/28/fragen-zum-css-flyout-menu/1800359#m1800359 open-ui.org stellt Popup vor (war: CSS-Flyout-Menü)] am 09.07.2022
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
~~~ HTML
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
~~~
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 Öffen-Button und Erklärungen beinhaltet. Mal schau'n.
Herzliche Grüße
Matthias Scharwies
--
Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht.
Er hat vergessen, dass er im gleichen Zeitraum auch heiratet.
Also für Interessierte:
Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten.
Ihr Name ist Sandra.