open-ui.org stellt Popup vor (war: CSS-Flyout-Menü)

[Matthias Scharwies]

Guten Morgen,

Fragen zum CSS-Flyout-Menü (ich habe das hier abgekupfert):
Selfhtml CSS Flyout Menü

3. Kann man den HTML/CSS-Code noch weiter eindampfen, ohne Funktionalität zu verlieren (ich bin ein echtes Sparbrötchen, was Code angeht)?

Die Variante des CSS-Flyout-Menüs mit details wurde ja im April im Forum diskutiert und aufgrund mangelnder Zugänglichkeit verworfen. ^[1]

Habe eben (und schon mal im Mai) grad was von der Popup API der open-ui.org gehört und gesehen:

Das HTML-Markup ist wie im ersten Beispiel im Wiki; es fallen nur die popup- und togglepopup-Attribute auf.

<button togglepopup="pop">Toggle PopUp</button>

<div id="pop" popup>
  And they're Rad! <span class="hand">🤙</span>
</div>

Wo ist der Witz? Die open-ui.org wollen die Lücke zwischen den „normalen“ HTML-Elementen und custom elements schließen, indem sie Lösungen für einzelne Probleme anbieten, die dann ohne JavaScript oder Framework direkt im Browser laufen.

In Chrome Canary geht das schon:

https://codepen.io/jh3y/pen/dymMYWR

Mal schauen, wann das in den anderen Browsern auftaucht. Evtl. wird es dann auch einen Polyfill geben und universell einsetzbar sein.

und warum nicht details verwenden?

Diese Popups arbeiten mit light dismiss. Während details mit einem Klick auf summarygeschlossen werden, geht hier auch [ESC] oder ein Klick irgendwo in die Webseite.

---

Im August (noch 3 Wochen!) werde ich den bestehenden Artikel ergänzen / glätten. Wer vorher will - nur zu!

Herzliche Grüße

Matthias Scharwies

---

1. SELF:Forum: Menü mit details und summary im Screenreader VoiceOver von Marc ↩︎