Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett

[Gunnar Bittersmann]

@@wowogiengen

Im Internet-Explorer fehlen aber z.B. die Hintergrundfarben der Tabellen, und die Rundungen der Rahmen sind auch weg.

Genau darüber hattest du dich hatte AudioBibel sich schon bei Android gewundert und Martin L. aus E. hatte gesagt, dass alte Androids keine CSS-Variablen unterstützen und auch Can I use verlinkt den URL dahin angegeben. (Die Verlinkung hab ich mal eben nachgeholt.)

Das bedeutet für mich aber, dass entweder der IE sich nicht an den Standard hält, oder der Firefox etwas kann, was der IE nicht kann…

Letzteres.

Wie soll ich da eine Seite erstellen, die für beide (im Bestfall sogar für alle) Webbrowser immer das korrekte Ergebnis anzeigt

Den CSS-Code so übersetzen, dass er ohne CSS-Variablen auskommt. Mehrere Möglichkeiten:

1. Du ersetzt in deinem Editor sämtliche Vorkommen von var(--farbe_at_dunkel) durch den Wert hsl(203, 47%, 72%) und auch alle anderen Variablen steht durch ihre jeweiligen Werte. Danach kannst du den :root {}-Block löschen.

   Vermutlich die einfachste Variante. Damit gibtst du allerdings den Vorteil auf, dass du alle diese Einstellungen nur einmal zentral festlegst.

2. Du verwendest einen CSS-Postprozessor, der dir diese Arbeit abnimmt.

3. Du verwendest einen CSS-Präprozessor (bspw. Sass) und darin Variablen, d.h. anstelle von

   :root
   {
     --farbe_at_dunkel: hsl(203, 47%, 72%);
     --farbe_at_heller: hsl(203, 75%, 75%);
     ⋮
   }
   

   schreibst du

     $farbe_at_dunkel: hsl(203, 47%, 72%);
     $farbe_at_heller: hsl(203, 75%, 75%);
     ⋮
   

   (kein :root {}-Block)

   und anstelle von var(--farbe_at_dunkel) überall $farbe_at_dunkel usw. Und das natürlich auch für alle anderen Variablen. Beim Kompilieren werden dann die Variablen durch die jeweiligen Werte ersetzt, wobei auch HSL (was IE 8 und früher nicht versteht) in RGB umgewandelt wird.

   Wobei ich allerdings hier statt einzelner Variablen eine Map verwenden würde:

   $settings: (
     farbe_at_dunkel: hsl(203, 47%, 72%),
     farbe_at_heller: hsl(203, 75%, 75%),
     ⋮
   );
   

   Abruf dann mit map_get($settings, farbe_at_dunkel) usw.

LLAP 🖖