nicht angemeldet
In Nicht-Füchsen ist das Layout zerschossen: das geöffnete Menü steht (außer bei mittelbreietn Viewports) neben der Überschrift anstatt darunter.;
Hm, wenn man dem display: flex vom <head> entfernt, und <h1> display: float gibt, dann verhält es sich bei mir in Chrome wie in FF. Aber darauf bist du ja auch schon gekommen, wieso wolltest du die Lösung nochmal vermeiden? Du könntest auch mit @supports (display: contents) eine Feature-Weiche bauen.
Wäre hier nicht eigentlich
<details>angebracht?Dann müsste man aber die Abfrage, ob das Menü initial geöffnet oder geschlossen sein soll (
open-Attribut gesetzt oder nicht), ins JavaScript verlagern anstatt per media query im CSS zu machen. Finde ich unschön.
Das musst du auch für aria-expanded machen, im Moment lügt das Attribut noch über die Sichbarkeit der Navigations-Liste. Mit matchMedia hast du in JavaScript die gleichen Möglichkeiten wie mit CSS-MediaQueries.
Und ggfs. noch einen Polyfill für Edge/IE bauen, die
detailsnoch nicht unterstützen.
Das Polyfill hast du doch schon fast fertig 😉 Du müsstest dein Skript nur auf das Markup abstimmen. Ich würde allerdings zu einem fertigen Polyfill greifen.
Nur dass sich
summaryvielleicht in Browsern als störrisch erweisen könnte.
Edge und IE haben eben kein spezfisches UserAgent-Stylesheet für <summary>, aber ist das wirklich ein Problem? Die DOM-Interfaces sollten von einem guten Polyfill implementiert werden.
Entscheidend für das Markup sollte letzten Endes doch die Zugänglichkeit sein, nicht der Komfort für den Entwickler. Ich weiß nicht, welche Lösung Nutzer(innen) von assistiver Technolgie hier bevorzugen, müsste man wohl mal Betroffene fragen.
Gunnar Bittersmann
Matthias Apsel