Layoutwechsel bei Media-Break und Tab-Reihenfolge – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Layoutwechsel bei Media-Break und Tab-Reihenfolge Mon, 10 Dec 18 14:50:46 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738170?srt=yes#m1738170 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738170?srt=yes#m1738170 <p>Hallo alle,</p> <p>ich hab jetzt kein Beispiel gemacht, aber ich denke das Problem ist klar.</p> <p>Wenn ich responsiverweise im CSS einen Media-Break habe, der dazu führt, dass Elemente eines Grids anders positioniert werden - wie ändere ich dann passend die Tab-Reihenfolge, falls das erforderlich ist?</p> <p>Hintergrund: Ich bastele zum Spaß an einem Web-Taschenrechner, und ich möchte das Layout bei breitem Bildschirm anders haben als bei einem schmalen. Ich bin noch nicht ganz sicher wie, aber ich gehe davon aus, dass dann anders aussieht und ein "logisches" Durchtabben nur in einer der Ansichtsvarianten möglich ist.</p> <p>Mit JavaScript kann man da sicherlich Abhilfe schaffen, aber das will ich vermeiden.</p> <p>Davon auszugehen, dass ein schmaler Viewport eh nur bei Touch-Devices vorkommt wo keiner mit Tab arbeitet könnte gewagt sein.</p> <p>Sicherlich kann man sich beim Layout auch selbst so beschränken dass die Tabs halbwegs funktionieren, aber mir geht es hier um die Fälle, wo das einfach nicht klappt. Gibt's da vordefinierte Mechanismen, die man nutzen kann?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Layoutwechsel bei Media-Break und Tab-Reihenfolge Mon, 10 Dec 18 15:14:22 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738174?srt=yes#m1738174 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738174?srt=yes#m1738174 <p>Hallo,</p> <blockquote> <p>wie ändere ich dann passend die Tab-Reihenfolge, falls das erforderlich ist?</p> </blockquote> <p>warum sollte das Durchtabben von der visuellen Darstellung abhängig sein? Angenommen ich würde mir die Tab-Reihenfolge für mehrfache Anwendung gemerkt haben, wäre ich doch irritiert, wenn diese sich geändert hat, weil ich das Fenster zusammengeschoben habe, um meine Daten in einem anderen Fenster zu sehen.</p> <p>Gruß<br> Kalk</p> Layoutwechsel bei Media-Break und Tab-Reihenfolge Mon, 10 Dec 18 15:16:39 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738175?srt=yes#m1738175 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738175?srt=yes#m1738175 <p>@@Rolf B</p> <blockquote> <p>Wenn ich responsiverweise im CSS einen Media-Break habe, der dazu führt, dass Elemente eines Grids anders positioniert werden - wie ändere ich dann passend die Tab-Reihenfolge, falls das erforderlich ist?</p> </blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wide<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css"><span class="token selector">#wide</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 21em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">#narrow</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span> <span class="token selector">#wide</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Layoutwechsel bei Media-Break und Tab-Reihenfolge Mon, 10 Dec 18 15:23:55 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738176?srt=yes#m1738176 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738176?srt=yes#m1738176 <p>@@Rolf B</p> <blockquote> <p>Durchtabben […] Mit JavaScript kann man da sicherlich Abhilfe schaffen, aber das will ich vermeiden.</p> </blockquote> <p>Aber du willst nicht JavaScript vermeiden‽</p> <p>Was du vermeiden solltest: das Durchtabben. Mit Tab-Taste kommt man in den Taschenrechner rein und von dort zur nächsten interaktiven Komponente. Innerhalb einer Komponente (hier: des Taschenrechners) wird mit Pfeiltasten navigiert – mit ←/→ horizontal; mit ↑/↓ vertikal. Fokus auf das jeweilige Element setzen mit JavaScript.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Layoutwechsel bei Media-Break und Tab-Reihenfolge Mon, 10 Dec 18 18:20:48 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738191?srt=yes#m1738191 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738191?srt=yes#m1738191 <p>Hallo Gunnar,</p> <p>Pfeiltasten - nee, die wollte ich eigentlich für die History behalten und ggf. zum Navigieren in der aktuellen Expression. Mal gucken. Ist PgUp/PgDn verbreitet genug? Sonst brauch ich noch einen Setup-Dialog für die Tastatur.</p> <p>Und da die Knöppschen vom Taschenrechner Buttons sind, wird das ohne JS wohl nicht zu machen sein. Aber ok, ohne JS ist der ganze TR eh Schrott, ich will ja keinen Postback pro Tastendruck </p> <p>Damit wird die Sache dann noch spannender: Da CSS die Knöppschens durcheinanderwürfeln kann, muss der keypress-Handler für die Pfeiltasten per Bildschirmkoordinaten eruieren, was denn nun links/rechts/oben/unten zu finden ist.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Layoutwechsel bei Media-Break und Tab-Reihenfolge Mon, 10 Dec 18 19:44:31 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738200?srt=yes#m1738200 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738200?srt=yes#m1738200 <p>@@Rolf B</p> <blockquote> <p>Pfeiltasten - nee, die wollte ich eigentlich […]</p> </blockquote> <p>Was du willst, ist irrelevant …</p> <blockquote> <p>[…] für die History behalten</p> </blockquote> <p>Dafür ist Backspace / Shift + Backspace geläufig.</p> <blockquote> <p>Ist PgUp/PgDn verbreitet genug?</p> </blockquote> <p>Zum Navigieren innerhalb einer Komponente sind die Pfeiltasten geläufig.</p> <blockquote> <p>Damit wird die Sache dann noch spannender: Da CSS die Knöppschens durcheinanderwürfeln kann</p> </blockquote> <p>Das willst du nicht. Du willst für jede Taste ihre Position im Grid(!) angeben. Bspw.</p> <pre><code class="block language-css"><span class="token selector">#minus-key</span> <span class="token punctuation">{</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> -2<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p>muss der keypress-Handler für die Pfeiltasten per Bildschirmkoordinaten eruieren, was denn nun links/rechts/oben/unten zu finden ist.</p> </blockquote> <p>Wenn du (<em>c</em>, <em>r</em>) jeder Taste kennst, sollte es nicht schwerfallen, die jeweiligen Tasten mit (<em>c</em>, <em>r</em> − 1), (<em>c</em> + 1, <em>r</em>), (<em>c</em>, <em>r</em> + 1) und (<em>c</em> − 1, <em>r</em>) zu finden.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Layoutwechsel bei Media-Break und Tab-Reihenfolge Mon, 10 Dec 18 20:40:48 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738202?srt=yes#m1738202 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738202?srt=yes#m1738202 <p>Hallo Gunnar,</p> <blockquote> <p>Dafür ist Backspace / Shift + Backspace geläufig.</p> </blockquote> <p>Backspace ist zum korrigieren geläufig, damit würde ich die letzte Ziffer löschen. Zum Navigieren in der Browser-History ist bei mir Alt ⬅️ und Alt ➡️ geläufig, aber DIE sollen ihre Bedeutung mal schön behalten.</p> <blockquote> <p>Zum Navigieren innerhalb einer Komponente sind die Pfeiltasten geläufig.</p> </blockquote> <p>Ich sollte es vermutlich so machen, dass man mit Tab in das Tastenfeld oder die History wechseln kann (also in eine Komponente) und dann die Pfeiltasten entsprechende Semantik haben.</p> <blockquote> <blockquote> <p>Da CSS die Knöppschens durcheinanderwürfeln kann Das willst du nicht. Du willst für jede Taste ihre Position im Grid(!) angeben.</p> </blockquote> </blockquote> <p>Gerade weil ich letzteres je nach Viewportsize will, will ich ersteres.</p> <p>Derzeit "male" ich das Layout mit grid-template in die CSS Datei. Habe ich dann im computed style grid-row und grid-column drin?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Layoutwechsel bei Media-Break und Tab-Reihenfolge Tue, 11 Dec 18 07:37:38 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738218?srt=yes#m1738218 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738218?srt=yes#m1738218 <p>@@Rolf B</p> <blockquote> <blockquote> <blockquote> <p>Da CSS die Knöppschens durcheinanderwürfeln kann Das willst du nicht. Du willst für jede Taste ihre Position im Grid(!) angeben.</p> </blockquote> </blockquote> <p>Gerade weil ich letzteres je nach Viewportsize will, will ich ersteres.</p> </blockquote> <p>Njein. Du willst wohldefinierte Tastaturlayouts für zwei (oder mehrere) verschiedene Viewportsgrößen.</p> <p>Du willst nicht auto-fill oder sowas; das meinte ich mit „nicht durcheinanderwürfeln“.</p> <blockquote> <p>Derzeit "male" ich das Layout mit grid-template in die CSS Datei. Habe ich dann im computed style grid-row und grid-column drin?</p> </blockquote> <p>Gute Frage. Ich weiß es nicht. Noch nicht. <a href="https://twitter.com/g16n/status/1072392616237559810" rel="nofollow noopener noreferrer">Weitergereicht.</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Layoutwechsel bei Media-Break und Tab-Reihenfolge Thu, 13 Dec 18 06:01:22 Z https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738372?srt=yes#m1738372 https://forum.selfhtml.org/self/2018/dec/10/layoutwechsel-bei-media-break-und-tab-reihenfolge/1738372?srt=yes#m1738372 <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Derzeit "male" ich das Layout mit grid-template in die CSS Datei. Habe ich dann im computed style grid-row und grid-column drin?</p> </blockquote> <p>Gute Frage. Ich weiß es nicht. Noch nicht. <a href="https://twitter.com/g16n/status/1072392616237559810" rel="nofollow noopener noreferrer">Weitergereicht.</a></p> </blockquote> <p>Mein geschätzter Kollege verwies mich auf <a href="https://github.com/w3c/csswg-drafts/issues/2681" rel="noopener noreferrer">diese Diskussion</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div>