marctrix: komplette Tabellenzeile verlinken

Beitrag lesen

Hej Gunnar,

… oder gar für andre Anwendungsfälle nutzen (einen schönen, halbtransparenten Overlay-Effekt, der dann alles darunter liegende für Mausnutzer unerreichbar macht).

Dafür ist das ::before-Pseudoelement da, das unter dem interaktiven Element liegt.

Ja. Hoffentlich denkt jeder Nicht-Frontender immer daran, dem du so etwas an die Hand gibst…

Das tu ich nicht. Ich sage eher: Nicht-Frontender, die keinen blassen Schimmer von HTML und CSS haben, sollen ihre Finger davon lassen.

Hier im Forum wünschen sich die meisten Fragenden wohl eher fertige Lösungen an Stelle von Erklärungen. Da scannt wohl so mancher nach kopierfähigen Code deine Antworten…

Aber lassen wir das, sind eh nur Annahmen…

Ist eh keine Kritik an der technischen Umsetzung, die ist gewohnt sauber!

Es spricht doch aber nichts dagegen, die zu verbessern (progressive enhancement) und für Mausschubser die clickbare Fläche zu vergrößern‽

Ist es besser, wenn man irgendwohin klicken kann und dann eine Aktion ausgelöst wird, obwohl man gar nicht auf den Link/Button geklickt hat, sondern ganz woanders hin?

Ein Beispiel hatte ich genannt.

Das ist etwas, was man von vielenWebseiten kennt: ein Teaser (meist nur dessen Überschrift, oft auch noch das Artikel-Bild) sind mit dem zugehörigen Artikel verlinkt.

Eine Tabellenzeile besteht aber aus vielen optisch voneinander getrennten Einträgen. Dass die alle eine Aktion auslösen, die in einer einzelnen Tabellenzelle beschrieben ist, finde ich nicht besonders intuitiv. Mag für Fachanwendungen ok sein, die man jeden Tag bedient. Aber selbst da vermutlich selten nötig.

Natürlich muss das im UI kenntlich gemacht werden, welche clickbare Fläche welche Aktion auslöst. Bspw. mit Hover-Effekt. Oder einen Rahmen um die Box.

Wie teilst du denn mit, welche Aktion ausgelöst wird? Die Beschriftung in der hervorgehobenen Tabellenzeile nochmals hervorheben?

Wie gesagt abgesehen davon, dass du ein schönes Beispiel dafür gebracht hast, dass so etwas technisch machbar ist, mag ich mich (noch) nicht mit dem Gedanken anfreunden, das auf einer Webseite dann auch vorgesetzt zu bekommen.

Wenn eine Tabellenzelle zu klein ist um angeklickt zu werden, ist sicher die Schriftart oder das Icon zu klein gewählt.

(Ob man hier die ganze Tabellenzeile bei Tastatursteuerung mittels :focus-within hervorheben will, kann man nochmals überlegen.)

Nicht, dass Tastaturnutzer den Vorteil hätten, genau zu sehen, was ausgelöst wird! Lass sie doch lieber auch die ganze Tabellenzeile durchsuchen, bis sie die Beschreibung der Aktion gefunden haben!

Nein! Bitte, bitte nicht machen…

Marc

Disclaimer: Es mag immer (seltene) Sonderdesign- und Anwendungsfälle geben, in denen so etwas sinnvoll ist.

0 75

komplette Tabellenzeile verlinken

Meowsalot
  • html
  1. 0
    dedlfix
    1. 0
      Meowsalot
      • css
      • html
      1. 0
        dedlfix
        1. 0
          Rolf B
        2. 0
          Meowsalot
    2. 1
      Gunnar Bittersmann
      1. 0
        dedlfix
        1. 0
          Gunnar Bittersmann
          1. 0
            marctrix
            1. 0
              Gunnar Bittersmann
              1. 0
                marctrix
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    marctrix
  2. 0
    Rolf B
    1. 0
      Gunnar Bittersmann
      1. 0
        Rolf B
        1. 0
          Gunnar Bittersmann
        2. 3
          Henry
      2. 0
        beatovich
        1. 0
          JürgenB
          1. 0
            beatovich
            1. 0
              JürgenB
              1. 1
                beatovich
                1. 0
                  JürgenB
                  1. 0
                    beatovich
                    1. 3
                      JürgenB
                      1. 0
                        beatovich
          2. 0
            marctrix
        2. 1
          Gunnar Bittersmann
          1. 0
            beatovich
            1. 0
              Tabellenkalk
              1. 0
                beatovich
                1. 0
                  Tabellenkalk
                2. 0
                  Gunnar Bittersmann
                  1. 0
                    Tabellenkalk
                  2. 0
                    Rolf B
    2. 0
      marctrix
  3. 0
    Henry
    • html
    • javascript
    • tabelle
    1. 0
      Henry
    2. 0
      marctrix
  4. 1
    Gunnar Bittersmann
    • css
    1. 0
      JürgenB
      1. 0
        Gunnar Bittersmann
        1. 1
          Gunnar Bittersmann
          • javascript
          1. 0
            Henry
            1. 0
              Gunnar Bittersmann
              1. 0
                Henry
                1. 0
                  Gunnar Bittersmann
                  1. 0

                    Warum immer Codepen?

                    Henry
                    • css
                    • editor
                    • meinung
                    1. 1
                      Rolf B
                      1. 0
                        Henry
                        1. 0
                          dedlfix
                        2. 0
                          marctrix
                      2. 1
                        Matthias Apsel
                    2. 0

                      komplette Tabellenzeile verlinken

                      Gunnar Bittersmann
                      • javascript
          2. 0
            Meowsalot
            1. 0
              marctrix
              1. 1
                Gunnar Bittersmann
                • barrierefreiheit
                • css
                • tabelle
                1. 0
                  marctrix
              2. 1
                MudGuard
                1. 0
                  marctrix
            2. 1
              Gunnar Bittersmann
              • css
              1. 0
                Meowsalot
                1. 1
                  Gunnar Bittersmann
                  • css
                  • html
                  1. 0
                    Meowsalot
                    1. 0
                      Matthias Apsel
                      • css
                      1. 0
                        Meowsalot
                      2. 0
                        Gunnar Bittersmann
                        • menschelei
                        1. 0
                          Tabellenkalk
                    2. 2
                      dedlfix
    2. 0
      Meowsalot
      1. 0
        marctrix
        1. 0
          Meowsalot
          • css
          • javascript
    3. 1
      dedlfix