Browser richtig ausschließen

Grundsätzlich liegt es erstmal nahe, jeden Browser zu unterstützen. Also jedem Besucher die vollen Seiteninhalte anzubieten, egal mit welchem Browser er kommt. Und idealerweise bedeutet das dann auch, immer ein Layout mitzuliefern. HTML-Code ohne CSS ist doch recht unbekömmlich, auch wenn gerne die Trennung von Form und Inhalt proklamiert wird.

Jeden Browser?

Nun möchte ich trotz dieser Vorstellungen nicht auf die Leistungen moderner Browser verzichten. Falls es nun doch zu aufwändig ist, jedem Browser sein eigenes Stylesheet auszuliefern, bleibt letztlich als sehr einfache Maßnahme genau das -eigentlich unbefriedigende- Ausliefern von HTML-Code ohne weitere Formatierung. Wenn der HTML-Code richtig aufgebaut und syntaktisch richtig eingesetzt ist, sollte das Ergebnis immerhin besser ausfallen als mit abstürzendem Netscape 4 oder verrutschten Seiten-Elementen im alten Internet Explorer.

Beim nachfolgenden Vorschlag geht es um möglichst einfachen Code, der die eingsetzten Browser sauber trennt. Erfahrungsgemäß mag es bei vielen üblichen Methoden Probleme mit dem Ausschluß des IE 4 geben. Angesichts einer Verbreitung von derzeit vielleicht 0,1 % halte ich es für zulässig, eine Lösung hier erstmal zu vernachläßigen und andere Aspekte vorrangig zu behandeln.

Alte Explorer

Nachdem zur Zeit auch schonmal über den IE 6 lamentiert wird (vgl. Browser Bashing 2009, stellt sich mir erstmal die Frage, wie es um die Veteranen IE 5 und IE 5.5 bestellt ist. Mit zusammen vielleicht um die 3 % Verbreitung sehe ich bei manchem Projekt immer noch die Notwendigkeit oder kleine Vorteile, auch diese Browser ordentlich zu bedienen.

Mit diesem Punkt mag auch die Frage nach der optimalen Strategie für den IE 6 zusammenhängen. Der IE 6 kennt bekanntlich zwei Darstellungsmodi, von denen der eine modernes CSS besser unterstützen soll, Stichwort boxbug; dieser Rendermodus des IE 6 läßt sich per Doctype steuern. Je nach Aufbau im HTML-Head verhält sich (nicht nur) dieser Browser unterschiedlich.

Da der IE 6 aber sowieso umfangreiche Nachhilfe benötigen mag, ist ein moderner Rendermodus nicht unbedingt ein so großer Vorteil, wie oft vermutet. Der “Quirks-Modus” erlaubt es hingegen, IE 5, 5.5. und 6 mit recht ähnlichen Styleangaben zu versorgen.

Bald ab IE 6

Nun möchte ich, zumindest was die IE 5 und 5.5 angeht, ein wenig der Entwicklung vorgreifen, und einfach mal unterstellen, dass die 3 % Besucherzahlen schon deutlich unter 1 % abgesunken seien. Unter dieser Voraussetzung mag es eher sinnvoll sein, den IE 6 als “CSS1 compliant” laufen zu lassen. Allerdings scheint es mir zugleich auch wieder fragwürdig, die Wahl des Doctype zu sehr auf den in absehbarer Zeit ja auch weniger wichtigen IE 6 auszurichten, nur um dessen Rendermodus verändern zu können.

Doctype

Jetzt ein Beispiel für den Doctype, genauer das doctype switching des IE 6. Beim derzeit beliebten XHTML kann unter bestimmten Bedingungen auf den XML-Prolog verzichtet werden. Mit XML-Deklaration schaltet der IE 6 in den Quirks-Modus, ohne nicht.

<?xml version="1.0" encoding="UTF-8"?>

UTF-8

Wichtig ist dabei auch der genutzte Zeichensatz, wie in ↗ Extensible HyperText Markup Language vom W3C beschrieben:

Remember, however, that when the XML declaration is not included in a document, the document can only use the default character encodings UTF-8 or UTF-16.

Wer also einen anderen Zeichensatz mit XHTML nutzen möchte als UTF-8 (oder -16), ist auf einen ensprechenden Prolog angewiesen. Wer bei XHTML für den IE 6 alle Optionen offenhalten möchte, hat einen Grund mehr, gleich UTF-8 zu verwenden.

Ein Stylesheet

Nun erstmal der Ansatz, ein Stylesheet so einzubinden, dass Netscape 4, frühe IE 4, IE 5 und 5.5., und mit einer einfachen Änderung später auch der IE 6, von den Styleangaben ausgeschlossen werden.
Damit würden, bei einem gemeinsamen Stylesheet für alle Browser, auch CSS-Weichen für IE 5 und 5.5 unnötig, ebenso eigene Stylesheets etwa per conditional comments

Conditional Comments

Am Anfang nun aber doch gleich eine Weiche mit immerhin einem conditional comment. Die Frage, ob solch proprietärer Code, wenn auch nur in Kommentarform, überhaupt zu verwenden ist, läßt sich hier eher pragmatisch angehen. Anders wären die Voraussetzungen, wenn sich ein komplexer Verhau solcher Korrekturen durch das ganze Dokument ziehem müßte. In der Bedingung der IE-spezifischen Kommentar-weiche wird nun festgelegt, welche ältere IEs ausgeschlossen werden.

media Attribut statt import

Anschliessend ließe sich Netscape 4, wie immer wieder propagiert, per @import ausschliessen. Einfacher kann dies aber über zusätzliche Angaben im media-Attribut des Link-Tags erfolgen, zumal sich der Internet Explorer 4 ja je nach Version durch @import gar nicht weiter beeindrucken oder fernhalten läßt.

<!--[if gt IE 5.5000]><!--   -->
<link rel="stylesheet" type="text/css" href="modern.css" media="all,screen">
<!-- <![endif]-->

IE 7 und IE 8

Wer es sich dezeit beim IE 8 besonders einfach möchte und auf die weitergehenden Fähigkeiten solange verzichten will bis der IE 7 nicht mehr genutzt wird, der kann so etwas verwenden:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Damit werden zukünftige IEs erstmal angewiesen, sich wie der IE 7 zu verhalten. Falls die CSS-Verarbeitung des IE 8 sowieso Korrekturen im Sytlesheet benötigen sollte, scheint mir die Methode ihre Berechtigung zu haben.

CSS-Unterscheidungen

Die grobe Einteilung der Browser sieht dann erstmal so aus:
Alte Browser (IE 4, NC 4, IE 5, IE 5.5)
IE 6
IE 7, ggf. IE 8
FireFox 3, Opera 9, Safari 4. Ggf. IE 8. Eventuell FF 2 oder 1, Opera 8.

Schließlich kann nun versucht werden, mit nur einem Stylsheet und CSS-Weichen auszukommen. Das einfachste sind in diesem externen Stylesheet die Korrekturen für den IE 6, denn nun müssen einfache Filter nicht mehr gegen andere alte Browser, ob NC 4 oder IE 5, abgesichert werden. Dazu mehr unter CSS-Weichen.