open-ui.org stellt Popup vor (war: CSS-Flyout-Menü)
bearbeitet von
Guten Morgen,
>
> Fragen zum CSS-Flyout-Menü (ich habe das hier abgekupfert):
> [Selfhtml CSS Flyout Menü](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Flyout-Men%C3%BC)
>
> 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]
[^1]: SELF:Forum: [ Menü mit details und summary im Screenreader VoiceOver ](https://forum.selfhtml.org/self/2022/may/01/menu-mit-details-und-summary-im-screenreader-voiceover/1798815#m1798815) von Marc
Habe eben (und schon mal im Mai) grad was von der **Popup API** der [open-ui.org](https://open-ui.org/components/popup.research.explainer) gehört und gesehen:
Das HTML-Markup ist wie im ersten Beispiel im Wiki.
~~~ HTML
<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 `summary`geschlossen 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
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
open-ui.org stellt Popup vor (war: CSS-Flyout-Menü)
bearbeitet von
Guten Morgen,
>
> Fragen zum CSS-Flyout-Menü (ich habe das hier abgekupfert):
> [Selfhtml CSS Flyout Menü](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Flyout-Men%C3%BC)
>
> 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]
[^1]: SELF:Forum: [ Menü mit details und summary im Screenreader VoiceOver ](https://forum.selfhtml.org/self/2022/may/01/menu-mit-details-und-summary-im-screenreader-voiceover/1798815#m1798815) von Marc
Habe eben (und schon mal im Mai) grad was von der **Popup API** der [open-ui.org](https://open-ui.org/components/popup.research.explainer) gehört und gesehen:
Das HTML-Markup ist wie im ersten Beispiel im Wiki.
~~~ HTML
<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 Brwosern 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 `summary`geschlossen 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
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
open-ui.org stellt Popup vor (war: CSS-Flyout-Menü)
bearbeitet von
Guten Morgen,
>
> Fragen zum CSS-Flyout-Menü (ich habe das hier abgekupfert):
> [Selfhtml CSS Flyout Menü](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Flyout-Men%C3%BC#Alternative:_details)
>
> 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]
[^1]: SELF:Forum: [ Menü mit details und summary im Screenreader VoiceOver ](https://forum.selfhtml.org/self/2022/may/01/menu-mit-details-und-summary-im-screenreader-voiceover/1798815#m1798815) von Marc
Habe eben (und schon mal im Mai) grad was von der **Popup API** der [open-ui.org](https://open-ui.org/components/popup.research.explainer) gehört und gesehen:
Das HTML-Markup ist wie im ersten Beispiel im Wiki.
~~~ HTML
<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 Brwosern auftaucht. Evtl. wird es dann auch einen Polyfill geben und universell einsetzbar sein.
Im August (noch 3 Wochen!) werde ich den bestehenden Artikel ergänzen / glätten. Wer vorher will - nur zu!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“