Gunnar Bittersmann: Bei input keine Tastatur einblenden

Beitrag lesen

@@Gunnar Bittersmann

Die eigentliche Idee ist, die vorhandene Struktur (jeweils 3 Gruppen mit 3 Elementen in der Horizontalen und der Vertikalen) auch im Markup abzubilden.

Wenn man das macht, also adäquates Markup schreibt, bekommt man das Styling quasi als Geschenk obendrauf.

Ich will die unterschiedliche Denkweise noch mal erläutern.

Pferd von hinten aufgezäumt:

Von einer nicht weiter strukturierten 9×9-Tabelle[1] auszugehen; bei der Frage, wie man die Linien für die Gruppen dicker bekommt, darauf kommen, aus Darstellungsgründen das Markup anzupassen und nachträglich colgroup/col und tbody einzufügen.

Übrigens bräuchte man für die Darstellung die Gruppierung im Markup nicht und auch keine Inline-Styles oder Klassen, das kriegt man auch mit Pseudoklassen :nth-child (oder :nth-of-type) hin.

Markup-first-Ansatz:

Zuerst die Struktur im Markup abbilden: Es gibt 3 Gruppen zu jeweils 3 Spalten:

    <colgroup><col/><col/><col/></colgroup>
    <colgroup><col/><col/><col/></colgroup>
    <colgroup><col/><col/><col/></colgroup>

Es gibt 3 Gruppen zu jeweils 3 Zeilen:

    <tbody><tr></tr><tr></tr><tr></tr></tbody>
    <tbody><tr></tr><tr></tr><tr></tr></tbody>
    <tbody><tr></tr><tr></tr><tr></tr></tbody>

Die trs werden dann mit jeweils 9 tds befüllt — fertig ist das Markup.

Beim Stylen merkt man dann: oh, wie gut, dass ich die colgroups und tbodys schon habe.

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

  1. 4×4, 16×16 entsprechend ↩︎