Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett
bearbeitet von 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 dir gesagt](https://forum.selfhtml.org/self/2017/may/27/anzeige-der-test-homepage-mit-android-browser-internet-voellig-unterschiedlich-und-teils-unkomplett/1695078#m1695078), dass alte Androids keine CSS-Variablen unterstützen und auch [Can I use](http://caniuse.com/#search=css%20variables){: @en} ~~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
~~~css
:root
{
--farbe_at_dunkel: hsl(203, 47%, 72%);
--farbe_at_heller: hsl(203, 75%, 75%);
⋮
}
~~~
schreibst du
~~~scss
$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:
~~~scss
$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 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett
bearbeitet von 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 schon bei Android gewundert und [Martin L. aus E. hatte dir gesagt](https://forum.selfhtml.org/self/2017/may/27/anzeige-der-test-homepage-mit-android-browser-internet-voellig-unterschiedlich-und-teils-unkomplett/1695078#m1695078), dass alte Androids keine CSS-Variablen unterstützen und auch [Can I use](http://caniuse.com/#search=css%20variables){: @en} ~~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
~~~css
:root
{
--farbe_at_dunkel: hsl(203, 47%, 72%);
--farbe_at_heller: hsl(203, 75%, 75%);
⋮
}
~~~
schreibst du
~~~scss
$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:
~~~scss
$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 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett
bearbeitet von 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 schon bei Android gewundert und [Martin L. aus E. hatte dir gesagt](https://forum.selfhtml.org/self/2017/may/27/anzeige-der-test-homepage-mit-android-browser-internet-voellig-unterschiedlich-und-teils-unkomplett/1695078#m1695078), dass alte Androids keine CSS-Variablen unterstützen und auch [Can I use](http://caniuse.com/#search=css%20variables){: @en} ~~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 Einstellung 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
~~~css
:root
{
--farbe_at_dunkel: hsl(203, 47%, 72%);
--farbe_at_heller: hsl(203, 75%, 75%);
⋮
}
~~~
schreibst du
~~~scss
$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:
~~~scss
$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 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett
bearbeitet von 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 schon bei Android gewundert und [Martin L. aus E. hatte dir gesagt](https://forum.selfhtml.org/self/2017/may/27/anzeige-der-test-homepage-mit-android-browser-internet-voellig-unterschiedlich-und-teils-unkomplett/1695078#m1695078), dass alte Androids keine CSS-Variablen unterstützen und auch [Can I use](http://caniuse.com/#search=css%20variables){: @en} ~~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 Einstellung 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
~~~css
:root
{
--farbe_at_dunkel: hsl(203, 47%, 72%);
--farbe_at_heller: hsl(203, 75%, 75%);
⋮
}
~~~
schreibst du
~~~scss
$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:
~~~scss
$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 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett
bearbeitet von 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 schon bei Android gewundert und [Martin L. aus E. hatte dir gesagt](https://forum.selfhtml.org/self/2017/may/27/anzeige-der-test-homepage-mit-android-browser-internet-voellig-unterschiedlich-und-teils-unkomplett/1695078#m1695078), dass alte Androids keine CSS-Variablen unterstützen und auch [Can I use](http://caniuse.com/#search=css%20variables){: @en} ~~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 Einstellung 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
~~~css
:root
{
--farbe_at_dunkel: hsl(203, 47%, 72%);
--farbe_at_heller: hsl(203, 75%, 75%);
⋮
}
~~~
schreibst du
~~~sass
$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:
~~~sass
$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 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett
bearbeitet von 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 schon bei Android gewundert und [Martin L. aus E. hatte dir gesagt](https://forum.selfhtml.org/self/2017/may/27/anzeige-der-test-homepage-mit-android-browser-internet-voellig-unterschiedlich-und-teils-unkomplett/1695078#m1695078), dass alte Androids keine CSS-Variablen unterstützen und auch [Can I use](http://caniuse.com/#search=css%20variables){: @en} ~~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 Einstellung 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%); … }`
schreibst du `$farbe_at_dunkel: hsl(203, 47%, 72%); …` (kein `:root {}`-Block)
und anstelle von `var(--farbe_at_dunkel)` überall `$farbe_at_dunkel`. 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%), …);`
Abruf dann mit `map_get($settings, farbe_at_dunkel)` usw.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)