CSS-Praxis: Browserweiche mit CSS

In diesem Bericht wird erklärt, wie man durch verschiedene Einbauweisen von externen CSS eine Browserweiche machen kann. Im zweiten Teil wird auf ein Problem hingewiesen welches u. U. beim Internet Explorer entstehen kann (FOUC) und wie man dieses Problem umgehen kann…

Eine externe CSS-Datei kann man auf verschiedenen Wegen einbauen. Aber nicht alle Browser verstehen alle Arten der Einbindung, daher ergeben sich für einen Webautor Möglichkeiten, speziell für ältere Browser, eigene CSS-Dateien zu entwickeln oder diese vollständig von CSS auszusperren. Aber keine Sorge, der pure Inhalt ist für alle sichtbar.

Dabei können zwei versch. Strategien verfolgt werden. Entweder man sperrt die alten Browser (Netscape 4.x, Internet Explorer 4.x etc.) völlig von den CSS-Anweisungen aus oder man gibt ihnen eine abgespeckte Version von CSS. Ich persönlich bevorzuge die erste Option, aber wenn die Anzahl der Besucher einer Seite mit Netscape 4.x noch relativ hoch ist, sollte evtl. überlegt werden auch eine CSS-Datei für die alten Browser einzubauen. Obwohl es einige große Seiten gibt (z. B. Stern Online), die völlig auf CSS für ältere Browser verzichten.

Und wie wird so was umgesetzt? Im allgemeinen CSS-Bereich wird beschrieben wie man eine externe CSS-Datei einbinden kann. Ziemlich alle relevanten Browser verstehen folgende Anweisung:

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

Moderne Browser (IE ab 5.x, Mozilla, Netscape ab 6.x, Opera ab 6.x) verstehen auch folgende Anweisung:

<style type="text/css">  </style>

Es besteht jetzt die Möglichkeiten einige CSS-Formatierungen, die die älteren Browser verstehen, in die erste CSS-Datei auszulagern und die Anweisungen, die für die neueren Browser unproblematisch sind, in die zweite CSS-Datei auszulagern.

Und was passiert, wenn man diese zwei Anweisungen in den Quelltext einbaut? Ein älterer Browser kommt zu der ersten Anweisung, er versteht sie und setzt sie auch um. Dann interpretiert er weiterhin den Quelltext, kommt zu der zweiten Anweisung und da er sie nicht versteht ignoriert er sie.

Ein moderner Browser liest die erste Anweisung und interpretiert die CSS-Datei. Anschließend bearbeitet er auch die Import-Anweisung, interpretiert die zweite CSS-Datei und überschreibt/ergänzt die erste CSS-Datei. Somit haben die älteren Browser das abgespeckte CSS und die modernen Browser die ‘Vollkost’.

Hierbei sollten einige Sachen beachtet werden. Zuerst kommt die Link- und dann die Import-Anweisung. Die CSS-Anweisungen der beiden Dateien dürfen nicht miteinander kollidieren, sie sollten sich ergänzen bzw. die zweite CSS-Datei sollte unerwünschte Formatierungen der ersten CSS-Datei überschreiben.

Wenn man die älteren Browser von CSS aussperren will, dann tätigt man einfach die Link-Anweisung nicht und fügt nur die Import-Anweisung ein. Die älteren Browser bekommen dann den puren Text ohne CSS-Formatierungen. Aber das Gute daran ist, daß kein Browser ausgesperrt wird.

Probleme mit IE

Bindet man ein externes CSS nur per @import ein und hat man im Kopfbereich der (X)HTML-Datei weder ein Link- noch ein Script-Element, dann kommt es bei dem Internet Explorer zum sog. FOUC (Flash of Unstyled Content). “Häh! Was ist das?” So habe ich auch darauf reagiert als Jens Groschtdreis mich auf dieses Problem aufmerksam gemacht hat.

Wenn IE auf eine, wie oben beschriebene, Website kommt, stellt er sie u. U. ca. für eine halbe bis einer Sekunde ganz ohne die CSS dar. Und warum passiert das? Dies kann ich nicht erklären. Ich kann nur vermuten, daß IE standarmäßig erwartet ein verlinktes CSS vorzufinden und ist dann ganz verwirrt 🙂 das keines da ist, sich dann ca. eine Sekunde überlegt was er machen soll und dann plötzlich das importierte CSS entdeckt. IE macht des öfteren komische Sachen, deswegen würde es mich nicht wundern wenn meine Vermutung tatsächlich stimmen würde ;-). Nachdem der IE die Website einmal in den Cache geladen hat tritt dieses Problem nicht mehr auf.

Die Lösung des Problems

Ein LINK oder ein SCRIPT-Element im Kopfbereich des Dokumentes löst dieses Problem. Im Klartext: wenn man z. B. Javascript oder ein verlinktes CSS vor der @import Anweisung tätigt, dann hat sich das FOUC-Problem gelöst. Zu Not kann das eine CSS-Datei sein die nichts anderes außer ein Kommentar beinhaltet. Ich bin mir zwar nicht 100%ig sicher, aber ich habe zumindest bei meinen Seiten beobachtet das die Einbundung von Favicons das Problem auch löst. Um herauszufinden ob das wirklich stimmt müßte man es ordentlich testen. Logisch ist dieser Gedanke schon, da die Anweisung für das Favicon auch ein Link-Element im Kopfbereich ist.

Mehr zu diesem Thema auf Bluerobot.com.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.