CSS - Visuelle Orientierung in Tabelle

[Gunnar Bittersmann]

@@Rolf B

done. Guck bitte noch mal drüber und erweitere auch deinen Pen, damit er für th und td funktioniert.

Du meinst, ich solle ⌘Z drücken? 😄

Ich hatte es tatsächlich erst mit :is(th, td), dann aber gesehen, dass das JavaScript-Beispiel etwas anders funktioniert und es daran angepasst. Ich finde es charmant, dass es dadurch einfacher wurde. Das Beispiel soll ja die Anwendung von :has() zeigen, nicht die Sache durch :is() verkomplizieren.

Ob man bei einer Tabelle auch beim Hovern über die Kopfzelle die Spalte highlighten möchte, hängt sicher von der Abwendung ab und schwankt zwischen ‚unbedingt‘ und ‚völlig überflüssig‘.

Da sollte man nochmal kurz drüber nachdenken, was hier besser wäre – auch im Kontext, dass der Kalender als Beispiel für eine beliebige Tabelle herhält.

Und wenn man schon beim Nachdenken ist, vielleicht die Tabelle um Zeilenköpfe erweiten (Kalenderwoche). Dann wären wir beim Einmaleins – wo ich den Hover-Effekt auch nur für die Datenzellen, nicht für die Kopfzellen vorgesehen habe.

Solange :has im FF noch hinter einem Schalter steckt, hat die JS-Lösung noch noch Existenzberechtigung. Find ich…

Das Problem im Firefox ist gar nicht mal der Schalter, sondern dass auch bei gesetztem Flag :has() noch nicht richtig funktioniert. Es tut’s wohl schon mit einfachen Selektoren als Argument, aber wenn in der Klammer was Komplexeres steht, steigt Firefox noch aus.

Ich würde die Reihenfolge aber umdrehen: erst die CSS-Lösung, dann die JavaScript-Lösung. Und bei der CSS-Lösung auch den Satz drinlassen, dass der Hovereffekt ein nützliche Ergänzung (progressive enhancement) ist, aber nicht zwingend erforderlich. Dass man also die JavaScript-Lösung nicht unbedingt braucht.

🖖 Живіть довго і процвітайте