CSS-Kniffliges zum Wochenende
bearbeitet von Gunnar Bittersmann@@1unitedpower
> Meine Entwickelrtools zeigen 5 `net::ERR_INSECURE_RESPONSE`-Fehler an, liegt vermutlich am fehlenden https.
Ja, das hab ich auf dem Schirm. Nicht öffentlich Wein (HTTPS) predigen und heimlich Wasser (HTTP) saufen. Ich muss meinen Kram endlich mal umstellen.
> Wenn es daran nicht liegt
Nein, die nicht eingebundenen Scripte wären für den [Backlink vom Codepen hier ins Forum](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682721#m1682721) und für *hanging punctuation*{: @en}, haben also mit der Sache hier nichts zu tun.
> was funktioniert nicht wie erwartet?
In Nicht-Füchsen ist das Layout zerschossen: das geöffnete Menü steht (außer bei mittelbreiten Viewports) neben der Überschrift anstatt darunter.
> 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*{: @en} im CSS zu machen. Finde ich unschön.
Und ggfs. noch einen Polyfill für Edge/IE bauen, die [`details` noch nicht unterstützen.](http://caniuse.com/#feat=details)
Die Elementstruktur wäre dieselbe: Steuerelement und Liste als Geschwister im Container
~~~HTML
<nav>
<button>…<button>
<ul>…</ul>
</nav>
~~~
vs.
~~~HTML
<details>
<summary>…</summary>
<ul>…</ul>
</details>
~~~
(Bei letzterem kommt `nav` noch außenrum.)
Das Stylingproblem wäre also auch dasselbe.
Nur dass sich `summary` vielleicht in Browsern als störrisch erweisen könnte.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
CSS-Kniffliges zum Wochenende
bearbeitet von Gunnar Bittersmann@@1unitedpower
> Meine Entwickelrtools zeigen 5 `net::ERR_INSECURE_RESPONSE`-Fehler an, liegt vermutlich am fehlenden https.
Ja, das hab ich auf dem Schirm. Nicht öffentlich Wein (HTTPS) predigen und heimlich Wasser (HTTP) saufen. Ich muss meinen Kram endlich mal umstellen.
> Wenn es daran nicht liegt
Nein, die nicht eingebundenen Scripte wären für den [Backlink vom Codepen hier ins Forum](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682721#m1682721) und für *hanging punctuation*{: @en}, haben also mit der Sache hier nichts zu tun.
> was funktioniert nicht wie erwartet?
In Nicht-Füchsen ist das Layout zerschossen: das geöffnete Menü steht (außer bei mittelbreietn Viewports) neben der Überschrift anstatt darunter.;
> 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*{: @en} im CSS zu machen. Finde ich unschön.
Und ggfs. noch einen Polyfill für Edge/IE bauen, die [`details` noch nicht unterstützen.](http://caniuse.com/#feat=details)
Die Elementstruktur wäre dieselbe: Steuerelement und Liste als Geschwister im Container
~~~HTML
<nav>
<button>…<button>
<ul>…</ul>
</nav>
~~~
vs.
~~~HTML
<details>
<summary>…</summary>
<ul>…</ul>
</details>
~~~
(Bei letzterem kommt `nav` noch außenrum.)
Das Stylingproblem wäre also auch dasselbe.
Nur dass sich `summary` vielleicht in Browsern als störrisch erweisen könnte.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)