Chrome und Edge ignorieren CSS

[Michael Landenberger]

Hallo,

hier werkelt eine Telefonanlage, die über ein Software-Interface konfiguriert
wird. Das Software-Interface enthält einen Webserver. Dieser stellt unter
http://localhost:5080 (unverschlüsselt) eine Web-Oberfläche bereit, über die
man die Anlage konfigurieren kann.

Ich habe nun mal die genannte Seite mit Chrome aufgerufen und dabei
festgestellt, dass das Layout nicht sonderlich schön aussieht. Mittels der
Entwickler-Tools von Chrome habe ich herausgefunden, dass die Elemente auf der
Seite keinerlei Stile aus der (ebenfalls vom Webserver bereitgestellten) CSS
erhalten, und das obwohl auf die CSS-Datei problemlos zugegriffen werden kann
und die darin enthaltenen Anweisungen vollkommen korrekt sind. Microsoft Edge
zeigt das gleiche Verhalten.

Dagegen wird das Web-Interface in Firefox und im Internet Explorer richtig (d.
h. mit allen Stilen aus der CSS-Datei) dargestellt.

Frage: wo muss ich in Chrome bzw. Edge schrauben, damit auch diese Browser das
Web-Interface korrekt anzeigen?

Gruß

Michael

[Arno Welzel]

Michael Landenberger:

> hier werkelt eine Telefonanlage, die über ein Software-Interface konfiguriert
> wird. Das Software-Interface enthält einen Webserver. Dieser stellt unter
> http://localhost:5080 (unverschlüsselt) eine Web-Oberfläche bereit, über die
> man die Anlage konfigurieren kann.
>
> Ich habe nun mal die genannte Seite mit Chrome aufgerufen und dabei
> festgestellt, dass das Layout nicht sonderlich schön aussieht. Mittels der
> Entwickler-Tools von Chrome habe ich herausgefunden, dass die Elemente auf der
> Seite keinerlei Stile aus der (ebenfalls vom Webserver bereitgestellten) CSS
> erhalten, und das obwohl auf die CSS-Datei problemlos zugegriffen werden kann
> und die darin enthaltenen Anweisungen vollkommen korrekt sind. Microsoft Edge
> zeigt das gleiche Verhalten.

Wird die CSS-Datei auch wirklich geladen? Wie hast Du das festgestellt?

> Dagegen wird das Web-Interface in Firefox und im Internet Explorer richtig (d.
> h. mit allen Stilen aus der CSS-Datei) dargestellt.
>
> Frage: wo muss ich in Chrome bzw. Edge schrauben, damit auch diese Browser das
> Web-Interface korrekt anzeigen?

Das kommt darauf an, warum die CSS-Datei nicht geladen wird.


--
Arno Welzel
https://arnowelzel.de

[Michael Landenberger]

"Arno Welzel" schrieb am 23.02.2022 um 10:51:17:

> Wird die CSS-Datei auch wirklich geladen? Wie hast Du das festgestellt?

Ob sie geladen wird, weiß ich nicht. Aber sie ist in jedem Fall vorhanden und
im Seiten-Quelltext ist auch der richtige Pfad angegeben. Die komplette
Deklaration in der HTML-Datei lautet:
<link rel="stylesheet" type="text/css" href="/lib/styles_profi.css">

Wenn ich mir in Chrome den HTML-Quelltext anzeigen lasse, kann ich
"/lib/styles_profi.css" anklicken. Dann öffnet sich die CSS-Datei und wird in
einem neuen Tab angezeigt, d. h. die Datei ist vorhanden und ein Zugriff
darauf möglich. In der CSS-Datei finden sich nur stinknormale und nicht
browser-spezifische CSS2-Direktiven zu Fonts, Hintergrund- und Rahmenfarben,
Element-Ausrichtung und andere Standard-Direktiven, die eigentlich jeder
Browser verstehen müsste.

Im Gegensatz zu Chrome und Edge laden Firefox (aktuelle Version 97.0.1) und
der Internet Explorer die CSS-Datei problemlos und zeigen die Seite vollkommen
korrekt an. Und genau darüber bin ich verwundert.

Hintergrund: das Konfigurations-Interface der Anlage lässt sich nicht nur im
Browser aufrufen, sondern auch in einem speziellen Client-Programm. Das
wiederum greift in der Default-Einstellung unabhängig vom eingestellten
Standard-Browser auf den Internet Explorer zurück. Glücklicherweise lässt sich
das aber ändern, denn es gibt in den Einstellungen des Client-Programms noch
andere Anzeige-Optionen. Dabei hat man die Auswahl zwischen dem
Internet-Explorer, dem im System eingestellten Standard-Browser und einem
Mozilla Active X-Plugin (?). Der Standard-Browser ist bei mir Chrome, aber
wenn ich den einstelle, wird die Seite nicht richtig dargestellt. Das
Active-X-Plugin habe ich nicht und will ich auch gar nicht haben, und der
Internet Explorer fliegt demnächst aus Windows 'raus. Natürlich könnte ich
jetzt Firefox zum Standard-Browser machen, dann würde auch das Client-Programm
wieder funktionieren. Aber eigentlich wollte ich bei Chrome bleiben. Daher
wäre es nett, wenn ich Chrome dazu bringen könnte, die Konfigurationsseite für
meine Telefonanlage richtig anzuzeigen. Dann müsste ich nur noch dem Client
sagen, dass er statt des Internet Explorer den Standard-Browser benutzen soll,
und alles wäre wieder in Butter.

Gruß

Michael

[Michael Landenberger]

"Michael Landenberger" schrieb am 23.02.2022 um 10:12:09:

> hier werkelt eine Telefonanlage, die über ein Software-Interface
> konfiguriert wird. Das Software-Interface enthält einen Webserver. Dieser
> stellt unter http://localhost:5080 (unverschlüsselt) eine Web-Oberfläche
> bereit, über die man die Anlage konfigurieren kann.
>
> Ich habe nun mal die genannte Seite mit Chrome aufgerufen und dabei
> festgestellt, dass das Layout nicht sonderlich schön aussieht.

Nachtrag: Ich habe der Konfigurationsseite jetzt mithilfe des Chrome-Addons
"Stylish" das CSS zwangsweise aufs Auge gedrückt. Dazu musste ich lediglich in
Stylish ein neues Design anlegen, den Inhalt der CSS-Datei dorthinein kopieren
und dann noch festlegen, dass das Design nur für http://127.0.0.1:5080
verwendet werden soll. Jetzt sieht die Seite auch in Chrome so aus, wie sie
soll.

Warum einfach, wenn's auch umständlich geht...

Gruß

Michael

[Arno Welzel]

Michael Landenberger:

> "Arno Welzel" schrieb am 23.02.2022 um 10:51:17:
>
>> Wird die CSS-Datei auch wirklich geladen? Wie hast Du das festgestellt?
>
> Ob sie geladen wird, weiß ich nicht. Aber sie ist in jedem Fall vorhanden und
> im Seiten-Quelltext ist auch der richtige Pfad angegeben. Die komplette
> Deklaration in der HTML-Datei lautet:
> <link rel="stylesheet" type="text/css" href="/lib/styles_profi.css">

Teste mal mit den Web-Developer-Tools (F12) im "Netzwerk"-Tab, ob Chrome
auch versucht, diese URL zu laden oder ob dabei ein Fehler auftritt.

Dass CSS geladen wird, dann aber nicht benutzt, habe ich so noch nie erlebt.

> Hintergrund: das Konfigurations-Interface der Anlage lässt sich nicht nur im
> Browser aufrufen, sondern auch in einem speziellen Client-Programm. Das
> wiederum greift in der Default-Einstellung unabhängig vom eingestellten
> Standard-Browser auf den Internet Explorer zurück. Glücklicherweise lässt sich

[...]

Um was für eine Telefonanlage handelt es sich denn?

[Arno Welzel]

Michael Landenberger:

Dann wurde die ursprüngliche CSS-Datei aber von Chrome gar nicht erst
geladen.

[Michael Landenberger]

"Arno Welzel" schrieb am 24.02.2022 um 11:10:35:

> Teste mal mit den Web-Developer-Tools (F12) im "Netzwerk"-Tab, ob Chrome
> auch versucht, diese URL zu laden oder ob dabei ein Fehler auftritt.

Die Datei wird geladen. Ein Fehler tritt dabei nicht auf. Nur werden die
enthaltenen Regeln nicht angewandt. Bei keinem der Seiten-Elemente taucht
irgendeine Regel aus der Datei auf. Allerdings werden im HTML-Code enthaltene
CSS-Anweisungen angewandt (ansonsten würde ja auch Stylish nicht
funktionieren).

Firefox (Windows und Android) und der Internet Explorer laden dagegen die
Datei nicht nur, sondern wenden sie auch an.

> Dass CSS geladen wird, dann aber nicht benutzt, habe ich so noch nie erlebt.

Dann ist jetzt das erste Mal ;-)

> Um was für eine Telefonanlage handelt es sich denn?

Agfeo AC 14 WebPhonie. Ja ich weiß, ist schon steinalt. Funktioniert aber
prima. Nur in Chrome und Edge nicht :-(

Inzwischen habe ich festgestellt, dass ich das Client-Programm gar nicht
brauche. Ich muss nur http://127.0.0.1:5080/menu im Browser aufrufen und kann
dann zwischen den einzelnen Funktionsbereichen wählen. Wenn ich das in einem
Browser mache, der die Seite richtig darstellt (also Chrome mit Stylish oder
Firefox), wäre das ein brauchbarer Ersatz für den Internet Explorer, nachdem
der aus Windows entfernt wurde. Ich muss mal sehen, ob sich Stylish in der
Praxis bewährt. Wenn nicht, dann muss ich halt wohl oder übel 2 Browser auf
meinem Rechner installieren: Firefox für die TK-Anlage und Chrome für alles
andere. Wäre zwar etwas unschön, aber wenn es wenigstens funktioniert, ist es
ok.

Gruß

Michael

[Michael Landenberger]

"Arno Welzel" schrieb am 24.02.2022 um 11:11:28:

> Dann wurde die ursprüngliche CSS-Datei aber von Chrome gar nicht erst
> geladen.

Doch, wurde sie (wie ich dank deines Hinweises mit den Entwickler-Tools
inzwischen festgestellt habe). Aber obwohl beim Laden kein Fehler auftritt,
wird die Datei komplett ignoriert.

Ein Syntax-Fehler kann aber nicht die Ursache sein: ich habe den Inhalt der
CSS-Datei 1:1 (also mit allen Kommentaren) in Stylish importiert. Stylish
wiederum schreibt das alles 1:1 in den HTML-Quellcode. Und dort wird es - o
Wunder - von Chrome berücksichtigt.

Ich stehe vor einem echten Rätsel und vermute einen Bug in Chrome.

Tante Google spuckte noch die Info aus, dass es Chrome nicht mag, wenn HTML
und CSS eine unterschiedliche Codierung (z. B. ANSI/Unicode) haben. Andere
Browser sollen da toleranter sein. Aber auch das kann nicht die Ursache sein:
HTML- und CSS-Dateien haben die gleiche Codierung.

Gruß

Michael

[Michael Landenberger]

"Michael Landenberger" schrieb am 25.02.2022 um 10:09:02:

> Tante Google spuckte noch die Info aus, dass es Chrome nicht mag, wenn HTML
> und CSS eine unterschiedliche Codierung (z. B. ANSI/Unicode) haben. Andere
> Browser sollen da toleranter sein. Aber auch das kann nicht die Ursache
> sein: HTML- und CSS-Dateien haben die gleiche Codierung.

Eben nochmal geprüft: das war offenbar ein Irrtum. Die HTML-Dateien sind
ANSI-codiert (Zeichensatz ISO-8859-15), die CSS-Dateien sind UTF-8-codiert.
Jedenfalls zeigt mir Notepad++, an den ich die HTML- und CSS-Dateien mal
verfüttert habe, das so an. Und angeblich mag Chrome (und der auf der gleichen
Basis werkelnde Edge) sowas nicht, während andere Browser damit kein Problem
haben. Ich glaube, hiermit den Grund für mein Problem gefunden zu haben.

Warum man CSS-Dateien UTF-8-codiert, erschließt sich mir nicht ganz, zumal die
Dateien in diesem Fall nur ASCII-Zeichen enthalten. Allerdings kann ich auch
nicht nachvollziehen, warum ein Browser damit nicht umgehen kann. Dass man das
nicht zum Problem machen muss, beweisen Firefox & Co.

Gruß

Michael

[Michael Landenberger]

"Michael Landenberger" schrieb am 23.02.2022 um 10:12:09:

> Ich habe nun mal die genannte Seite mit Chrome aufgerufen und dabei
> festgestellt, dass das Layout nicht sonderlich schön aussieht. Mittels der
> Entwickler-Tools von Chrome habe ich herausgefunden, dass die Elemente auf
> der Seite keinerlei Stile aus der (ebenfalls vom Webserver bereitgestellten)
> CSS erhalten, und das obwohl auf die CSS-Datei problemlos zugegriffen werden
> kann und die darin enthaltenen Anweisungen vollkommen korrekt sind.
> Microsoft Edge zeigt das gleiche Verhalten.

Chrome und Edge zicken nach wie vor rum. Allerdings bin ich jetzt mit meinem
Latein am Ende. Nachdem ich im Netz Berichte gefunden habe, nach denen Chrome
offenbar ein Problem damit hat, wenn HTML- und CSS-Dateien unterschiedlich
codiert sind, habe ich dafür gesorgt, dass beide garantiert die gleiche
Codierung haben (das war kein Problem, denn der Server läuft lokal auf dem
Rechner und ich habe Zugriff auf alle CSS-Dateien, die der Server an Clients
ausliefert, kann diese also jederzeit modifizieren). Jetzt sind sowohl HTML-
als auch CSS-Dateien ANSI-codiert, was ich nochmal in einem Hex-Editor
überprüft habe. Der Server liefert die Dateien auch genau so aus, wie sie auf
der Platte liegen, sie kommen also auch ANSI-codiert im Browser an.

Chrome lädt die CSS-Dateien und meldet dabei HTTP-Code 200, also erfolgreiches
Laden. Speichert man die HTML- und CSS-Dateien auf dem Rechner (mittels "Link
speichern unter..."), werden sie als ANSI-codierte Dateien gespeichert.
Trotzdem wendet Chrome das CSS nicht an. Dagegen gibt es mit exakt denselben
CSS-Direktiven keine Probleme, wenn sie im HTML-Quellcode anstatt in einer
separaten CSS-Datei stehen. Es kann sich also auch nicht um ein Problem mit
der Syntax oder der Kompatibilität handeln. Firefox und dem Internet Explorer
ist das alles egal, die stellen die Seite so, wie sie sie vom Server geliefert
bekommen, vollkommen korrekt dar.

Spielt vielleicht die Stelle eine Rolle, an der die CSS-Dateien im
HTML-Quellcode verlinkt sind? Der HTML-Header sieht so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Set online - admin</title>

<link rel="stylesheet" type="text/css" href="/lib/styles_profi.css">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<script src="/lib/jsfuncs.js" type="text/javascript"></script>
</head>
<body>
....
</body>
</html>

Gruß

Michael

[Helmut Waitzmann]

"Michael Landenberger" <spamwird...@web.de>:

>"Michael Landenberger" schrieb am 25.02.2022 um 10:09:02:
>
>> Tante Google spuckte noch die Info aus, dass es Chrome nicht mag,
>> wenn HTML und CSS eine unterschiedliche Codierung (z. B.
>> ANSI/Unicode) haben. Andere Browser sollen da toleranter sein.
>> Aber auch das kann nicht die Ursache sein: HTML- und CSS-Dateien
>> haben die gleiche Codierung.
>
>Eben nochmal geprüft: das war offenbar ein Irrtum. Die HTML-Dateien
>sind ANSI-codiert (Zeichensatz ISO-8859-15), die CSS-Dateien sind
>UTF-8-codiert. Jedenfalls zeigt mir Notepad++, an den ich die HTML-
>und CSS-Dateien mal verfüttert habe, das so an.

Aha.  Woran macht Notepad++ die UTF-8‐Kodierung fest, wenn die
Dateien doch nur ASCII‐Zeichen enthalten, wie im folgenden
beschrieben?

>Warum man CSS-Dateien UTF-8-codiert, erschließt sich mir nicht
>ganz, zumal die Dateien in diesem Fall nur ASCII-Zeichen enthalten.

Fest steht, dass eine Datei, die in UTF-8 kodiert ist und aber nur
ASCII‐Zeichen enthält, als binärer Datenstrom interpretiert, genau
dieselbe Bytefolge liefert wie die, die man erhält, wenn man die
Datei in ASCII umkodiert und dann den Datenstrom untersucht.

Kurz gesagt:  Die UTF-8‐Kodierung ist eine Obermenge der
ASCII‐Kodierung, und einer in UTF-8 kodierten Datei, die nur
ASCII‐Zeichen enthält, kann man nicht ansehen, dass sie in UTF-8
kodiert ist.

Woran also erkennen Chrome, Edge und Notepad++ die Kodierung UTF-8,
wenn doch der Inhalt nur aus ASCII‐Zeichen besteht?

Oder enthalten die CSS‐Dateien doch nicht nur ASCII‐Zeichen sondern
mindestens ein UTF-8‐Zeichen, beispielsweise ein in UTF-8 kodiertes
Byte‐Order‐Mark‐Zeichen (siehe
<https://de.wikipedia.org/wiki/Byte_Order_Mark#top>, besonders auch
die Abschnitte
<https://de.wikipedia.org/wiki/Byte_Order_Mark#In_UTF-8> und
<https://de.wikipedia.org/wiki/Byte_Order_Mark#Weiteres>) am Anfang
der Datei?

[Michael Landenberger]

"Helmut Waitzmann" schrieb am 27.02.2022 um 19:53:07:

> "Michael Landenberger" <spamwird...@web.de>:

> Woran macht Notepad++ die UTF-8‐Kodierung fest, wenn die Dateien doch
> nur ASCII‐Zeichen enthalten, wie im folgenden beschrieben?

Man BOM (Byte Order Mark).

>> Warum man CSS-Dateien UTF-8-codiert, erschließt sich mir nicht ganz, zumal
>> die Dateien in diesem Fall nur ASCII-Zeichen enthalten.

> Fest steht, dass eine Datei, die in UTF-8 kodiert ist und aber nur
> ASCII‐Zeichen enthält, als binärer Datenstrom interpretiert, genau dieselbe
> Bytefolge liefert wie die, die man erhält, wenn man die Datei in ASCII
> umkodiert und dann den Datenstrom untersucht.

Ich habe mich falsch ausgedrückt: was *in* der Datei steht, hatte ich bis dato
gar nicht untersucht. Ich habe mir nur angesehen, was am Bildschirm angezeigt
wird, und das waren im Fall der CSS-Datei nur ASCII-Zeichen. Ergo ergab die
Umwandlung in ANSI keine Änderung am Bildschirm, wohl aber eine Änderung des
Dateiinhalts (in diesem Fall wurde allerdings nur das BOM entfernt).

> Woran also erkennen Chrome, Edge und Notepad++ die Kodierung UTF-8, wenn

> doch der Inhalt nur aus ASCII-Zeichen besteht?

Wie geschrieben am BOM.

Gruß

Michael