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; es fallen nur die `popup`- und `togglepopup`-Attribute auf. ~~~ 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.“

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.“

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.“

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.“