5er-Bremsen lösen

Der 5er-Internet-Explorer scheint nicht ausrottbar, immer noch werden damit Websites aufgerufen. Doch ich habe es längst aufgegeben, für ihn das Design anzupassen – der Mehraufwand liegt irgendwo bei 20 bis 50 Prozent. Doch damit die Nutzer des Internet Explorer 5 kein Kuddelmuddel zu sehen bekommen, sondern eine nackte HTML-Seite, muss die Website mit zwei zusätzlichen CSS-Dateien ausgebremst werden. Doch wer auf Kommentare in den CSS-Dateien verzichten kann, kommt mit einer aus.

Ein häufig im Netz anzutreffender Tipp, die 5er IEs auszuschalten, besteht darin, neben der alle Style-Anweisungen enthaltenden Datei (im Beispiel: standard.css) und einer leeren Datei (im Beispiel: null.css) eine Filter-CSS-Datei anzulegen und diese aus der (X)HTML-Datei heraus aufzurufen. In dieser filter.css wird zunächst Tanteks High Pass Filter eingesetzt, um die Internet Explorer 5 für Windows auf die falsche Spur zu leiten – sie verschlucken sich an der ersten Zeile und nehmen dann die zweite Deklaration, mit der die gültige CSS-Datei aufgerufen wird, nicht wahr.

@import "null.css? \"&\{";
@import "standard.css";

Modernere Browser ab Internet Explorer 6, und selbstverständliche Firefox, Opera, Safari und so weiter lassen sich nicht irritieren. Sie rufen sowohl die Datei null.css auf (in der sie nichts finden) als auch die standard.css (die ihnen sagt, wie sie die HTML-Seite optisch aufzuhübschen haben).

Der Filter funktioniert zuverlässig, hat jedoch einen entscheidenden Nachteil. Sofern die CSS-Dateien nicht gecacht werden, müssen ausgerechnet die besseren Browser drei Requests ausführen, um die Dateien filter.css, null.css und standard.css aufzurufen. Der IE 5 Windows begnügt sich dagegen mit einer Serveranfrage.

Und noch eines fehlt: der Filter lässt die Anweisungen für den IE 5 Mac ungehindert passieren – und auch der geht zum Tei sehr eigenwillig mit CSS um. Eine um den Commented Backslash Hack ergänzte filter.css behebt auch dieses Problem.

@import "null.css?\"\{";
/* filter ie/mac \*/
@import "standard.css";

Hier sorgt der Kommentar mit dem Backslash vor dem abschließenden Sternchen dafür, dass der IE Mac blind bleibt für die nächsten Anweisungen.

Es geht aber auch einfacher. Wenn man an den Anfang einer zenralen CSS-Datei diese beiden Zeilen schreibt

/* filter ie/mac \*/
i{content:"\"/*"}

dann bekommt kein einziger IE 5 auch nur eine Zeile CSS-Code zu sehen – bis der erste Kommentar auftaucht. Also müsste auf diesen verzichtet oder er eben wiederum in dieser Form geschrieben werden:

/* mein Kommentar \*/
i{content:"\"/*"}

(Bei der zweiten Zeile handelt es sich übrigens um den Inline High Pass Filter).

Damit wären bereits zwei CSS-Dateien gespart – und wer die bekannten Hacks gegen den IE 6 und seine Eigenmächtigkeiten einsetzt, kann sich auch für diesen eine eigene über conditional comments aufgerufene CSS-Datei sparen. Allerdings ist die Verwendung van Hacks umstritten, es wird seit Ewigkeiten ein Streit im Netz darüber geführt, doch bislang habe ich damit keine schlechten Erfahrungen gemacht.

Bliebe noch die CSS für den Druck. Eine eigene CSS nur fürs Drucken? Die kann man sich ebenfalls schenken. Und zwar so:

/* Filter für IE Mac \*/
i{content:"\"/*"}

@media screen,projection{
  …hier stehen die allgemeinen CSS-Anweisungen…
}

@media print{
  …hier stehen die Druckanweisungen…
}

Am Anfangen bremsen zwei Zeilen Code die alten Internet Explorer in ihrem Tatendrang, die Darstellung für den Bildschirm und die Druckausgabe werden über die beiden @media-Anweisungen (media queries) gesteuert, hinter denen die jeweiligen Medien angeführt werden. Alle CSS-Befehle für ein bestimmtes Medium werden dabei von geschweiften Klammern umschlossen.

Das Ergebnis der Optimierung: Statt fünf CSS-Dateien nur eine einzige CSS. Weniger geht nun wirklich nicht.

Update: Inzwischen ist dieses Gefrickel überflüssig geworden, der 5er ist tot und derzeit tendiert auch der 6er gegen Null, so dass es keinen Grund mehr gibt, diese prähistorischen Browser länger zu unterstüzen.