Fehler: Hintergrundfarbe gesetzt ohne Textfarbe anzugeben

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Funktioniert prächitg: sticky table head

Ähm nein, tut es nicht. Und das Tutorial im Wiki ist genauso fehlerhaft.

Hier steckt der Fehler:

thead {
	position: sticky;
	top: 0;
	background: white;
}

Es ist so gut wie immer falsch, allein Vorder- bzw. Hintergrundfarbe zu setzen. Das kann zur ostfriesischen Nationalflagge (weißer Adler auf weißem Grund)^[1] führen (“hello dark mode, my old friend”)^[2].

Immer[tm] Vorder- und Hintergrundfarbe setzen, also noch color: black dazu.

Noch besser: auch im Tabellenkopf die Nutzerpräferenz respektieren:

:root {
  --background-color: white;
  --color: black;
  background-color: var(--background-color);
  color: var(--color);
}

@media (prefers-color-scheme: dark) {
  --background-color: black;
  --color: white;
}

thead {
  position: sticky;
  top: 0;
  background: var(--background-color);
}

In dem Fall kann thead color von :root erben. Schadet aber auch nicht, da nochmals color: var(--color) anzugeben.

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

---

1. Otto ↩︎

2. frei nach Paul Simon ↩︎