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? ↩︎

[Gunnar Bittersmann]

@@Matthias Scharwies

Was ist der Unterschied zu dialog?[^2] dialog ist modal - alles wird gestoppt

Nein. Das hatte ich doch gerade erst im anderen Thread geschrieben.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Was ist der Unterschied zu dialog?[^2] dialog ist modal - alles wird gestoppt

Nein. Das hatte ich doch gerade erst im anderen Thread geschrieben.

Dann korrigier ich mich mal:

Was ist der Unterschied von popover zu dialog mit showModal()? dialog ist modal - alles wird gestoppt

Du hast hoffentlich nichts gegen den Begriff „modale Dialogfenster“ an sich - wie würdest du den in diesem Text modal, bzw. eben das von dir in dieser Folie verwendete inert übersetzen:

Modality / inertness

Some design systems have a component named “modal”, but modality is more of a characteristic than a component itself.

So what does it mean for an element to be modal? Basically, when a modal component is open, it is the only thing that is not inert. Only the modal content can be interacted with, the rest of the page or application is made inert. Inert content is content that users cannot interact with. It is only really there visually, but you cannot Tab to it, click it, scroll it or access the content via assistive technologies.

Elements that are not modal are called non-modal or modeless.

In einem künftigen Tutorial sollte man imho nicht die Begriffe modal und nichtmodal zur Abgrenzung verwenden.

@Rolf B @JürgenB @all Heute Abend würde ich fragen, wo und unter welchem Seitennamen man so etwas veröffentlichen könnte.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich würde es so machen wie der von Dir zitierte Text: Den Begriff verwenden, und gleich erklären. Im Wiki kann man ihn dann auch noch als Lemma vorsehen und auf die Erklärung leiten.

Inert content is content that users cannot interact with. It is only really there visually, but you cannot Tab to it, click it, scroll it or access the content via assistive technologies.

Der Begriff inert bezeichnet in der Naturwissenschaft reaktionsträge Substanzen oder auch unbewegliche Gegenstände. Auf einer Webseite ist inerter Inhalt ein Inhalt, mit dem Benutzer nicht interagieren können. Er ist lediglich visuell vorhanden, aber man kann ihn nicht mit der Tab-Taste erreichen, anklicken, scrollen oder durch Assistenztechniken darauf zugreifen.

Satz 1 und die Überleitung "Auf einer Webseite" sind optional.

Rolf

[Matthias Scharwies]

Guten Morgen,

wir hatten gestern Abend überlegt, ob die „starre“ Wiki-Einteilung in HTML, CSS und JS bei einem Element wie dialog überhaupt sinnvoll ist: Bereits bei HTML/Tutorials/dialog geht es eigentlich mehr um das Öffnen und Schließen mit JavaScript.

Problem ist, dass …

• Fixierte Tooltips mit :target
• Tooltips mit :hover

mit einer reinen CSS-Lösung vermeintliche Funktionalität ohne JS bieten sollten, JS ja aber eigentlich Benutzerinteraktionen ermöglichen und erleichtern soll. Anfänger - so wie ich 2008 - haben eine panische Angst vor „schwierigem Code“ und wollen lieber 200 Zeilen CSS produzieren, ohne zu einer funktionalen Lösung zu kommen.

Deshalb habe ich den Abschnitt mit :target depubliziert und das CSS-Tutorial mit einem ToDo versehen und an einen neuen Ort verschoben:

Infobox/Tooltips_mit_Popover

Popover

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

Sehr gutes Tutorial mit vielen Beispielen:

• Introducing the popover API von Una Kravetz

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>

Das ehemalige CSS-only-Tutorial habe ich mit einem ToDo versehen und es wird hoffentlich zeitnah umgebaut. So viel HTML wie möglich, so wenig JS wie nötig und CSS nur zum positionieren und gestalten!

Infobox/Tooltips_mit_Popover

dialog

Wir haben 2 dialog-Tutorials. @Felix Riesterer tendiert dazu, beide erst einmal getrennt zu lassen. Das Einstiegs-Tutorial habe ich aber ebenfalls verschoben:

• Infobox/modale_Dialogfenster

Hier muss noch ergänzt werden:

• Abgrenzung zu Popover
• modal versus nichtmodal
• Toplayer

#############

Wer Beispiele und Anregungen hat - immer her damit!

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Wie würdet ihr inert übersetzen?

Schlicht mit „inaktiv“.

Tschö, Auge

[Matthias Scharwies]

Servus!

Hallo

Wie würdet ihr inert übersetzen?

Schlicht mit „inaktiv“.

Danke!

In Gedanken bin ich schon beim Tutorial; komme aber wohl erst im November dazu!

Herzliche Grüße

Matthias Scharwies

--

[Auge]

Hallo

Wie würdet ihr inert übersetzen?

Schlicht mit „inaktiv“.

Danke!

Mittlerweile habe ich gesehen, dass sich Rolf gestern Abend auch schon im gleichen Tenor dazu geäußert hatte. Der Dank sollte also in gleichem Maße an ihn gehen. 😀

In Gedanken bin ich schon beim Tutorial; komme aber wohl erst im November dazu!

Ich bin gespannt. 🙂

Tschö, Auge

[Matthias Scharwies]

Servus!

Hallo

Wie würdet ihr inert übersetzen?

Schlicht mit „inaktiv“.

Danke!

Mittlerweile habe ich gesehen, dass sich Rolf gestern Abend auch schon im gleichen Tenor dazu geäußert hatte. Der Dank sollte also in gleichem Maße an ihn gehen. 😀

Ja, das war mir auch schon alles klar, aber ich muss ja modal erkären, was ich als Wort eh schon komisch finde (modale Hilfsverben, Modaladverbiale, Modalitäten, wie komm ich da auf eine Analogie?) - und dann dieses inert, ich kenn's von inertia = Massenträgheit, wollte schon ausgegraut vorschlagen, da ist „inaktiv, dh. die Links und Eingabefelder sind nicht erreichbar ...“ schon sehr gut!

In Gedanken bin ich schon beim Tutorial; komme aber wohl erst im November dazu!

Ich bin gespannt. 🙂

Tschö, Auge

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Abend,

@Felix Riesterer mochte am Mittwoch keine modals, da ist er nicht allein:

https://modalzmodalzmodalz.com/

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

@Felix Riesterer mochte am Mittwoch keine modals, da ist er nicht allein:

https://modalzmodalzmodalz.com/

Naja, wie dort schon gesagt, können Modals auf unangenehme, schlechte, nervige Weisen benutzt werden. Ganz so, wie es halt bei vielen anderen Techniken auch ist. Auf der Seite werden ihnen aber genauso auch „genuine, good uses“ zugestanden.

Tschö, Auge