Layoutwechsel bei Media-Break und Tab-Reihenfolge

[Rolf B]

Hallo alle,

ich hab jetzt kein Beispiel gemacht, aber ich denke das Problem ist klar.

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?

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.

Mit JavaScript kann man da sicherlich Abhilfe schaffen, aber das will ich vermeiden.

Davon auszugehen, dass ein schmaler Viewport eh nur bei Touch-Devices vorkommt wo keiner mit Tab arbeitet könnte gewagt sein.

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?

Rolf

[Tabellenkalk]

Hallo,

wie ändere ich dann passend die Tab-Reihenfolge, falls das erforderlich ist?

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.

Gruß
Kalk

[Gunnar Bittersmann]

@@Rolf B

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?

<div id="narrow">…</div>
<div id="wide">…</div>

#wide { display: none }

@media (min-width: 21em)
{ 
	#narrow { display: none }
	#wide { display: block }
}

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf B

Durchtabben […] Mit JavaScript kann man da sicherlich Abhilfe schaffen, aber das will ich vermeiden.

Aber du willst nicht JavaScript vermeiden‽

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.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

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.

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 😂

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.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Pfeiltasten - nee, die wollte ich eigentlich […]

Was du willst, ist irrelevant …

[…] für die History behalten

Dafür ist Backspace / Shift + Backspace geläufig.

Ist PgUp/PgDn verbreitet genug?

Zum Navigieren innerhalb einer Komponente sind die Pfeiltasten geläufig.

Damit wird die Sache dann noch spannender: Da CSS die Knöppschens durcheinanderwürfeln kann

Das willst du nicht. Du willst für jede Taste ihre Position im Grid(!) angeben. Bspw.

#minus-key
{
	grid-row: 3;
	grid-column: -2;
}

muss der keypress-Handler für die Pfeiltasten per Bildschirmkoordinaten eruieren, was denn nun links/rechts/oben/unten zu finden ist.

Wenn du (c, r) jeder Taste kennst, sollte es nicht schwerfallen, die jeweiligen Tasten mit (c, r − 1), (c + 1, r), (c, r + 1) und (c − 1, r) zu finden.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Dafür ist Backspace / Shift + Backspace geläufig.

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.

Zum Navigieren innerhalb einer Komponente sind die Pfeiltasten geläufig.

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.

Da CSS die Knöppschens durcheinanderwürfeln kann Das willst du nicht. Du willst für jede Taste ihre Position im Grid(!) angeben.

Gerade weil ich letzteres je nach Viewportsize will, will ich ersteres.

Derzeit "male" ich das Layout mit grid-template in die CSS Datei. Habe ich dann im computed style grid-row und grid-column drin?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Da CSS die Knöppschens durcheinanderwürfeln kann Das willst du nicht. Du willst für jede Taste ihre Position im Grid(!) angeben.

Gerade weil ich letzteres je nach Viewportsize will, will ich ersteres.

Njein. Du willst wohldefinierte Tastaturlayouts für zwei (oder mehrere) verschiedene Viewportsgrößen.

Du willst nicht auto-fill oder sowas; das meinte ich mit „nicht durcheinanderwürfeln“.

Derzeit "male" ich das Layout mit grid-template in die CSS Datei. Habe ich dann im computed style grid-row und grid-column drin?

Gute Frage. Ich weiß es nicht. Noch nicht. Weitergereicht.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Derzeit "male" ich das Layout mit grid-template in die CSS Datei. Habe ich dann im computed style grid-row und grid-column drin?

Gute Frage. Ich weiß es nicht. Noch nicht. Weitergereicht.

Mein geschätzter Kollege verwies mich auf diese Diskussion.

LLAP 🖖