Workshop: Browserweiche
Die modernen Browser ab der Version 6 sind mittlerweile gut in der Umsetzung des
CSS-Standards und umfangreichere CSS-Formatierungen sind kein so großes Problem
wie in den letzten Jahren. Probleme bereiten nur noch der Netscape 4 und
der Internet Explorer 5.0.
Eine Lösung ist, für diese Browser ein eigenes Stylesheet zu erstellen, dass nur die
Eigenschaften enthält, die sie auch verstehen.
Der Netscape 4
Der Netscape 4 war Jahre lang der natürliche Feind eines jeden Stylesheet-Anwenders, da er eine sehr schlechte CSS-Umsetzung hat. Heute ist der Anteil dieses Browsers in den Aufrufstatistiken so gering, dass man überlegen kann, ihn komplett auszuschließen, statt ein eigenes Stylesheet zu erstellen. Beide Wege stelle ich hier vor.
Browserweiche für Netscape 4
Soll deine Seite auch von Netscape 4-Anwendern betrachtet werden, benötigst du für komplexere Layouts eine eigene CSS-Datei für diesen Browser. Der folgende Weg ist der einfachste.
,
,
,
,
,
,
<link href="standard.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import url("komplex.css");
</style>
Das erste <link ... lädt zunächst die standard.css,
die nur die Eigenschaften für den Netscape 4 enthält.
Den dann folgende Befehl @import kennt der alte Browser nicht aber die Neuen,
sodass nur die die komplex.css mit den umfangreicheren Stylesheets laden.
Die komplex.css enthält alle Stylesheet-Angaben, die du für das Layout benötigst.
Das müssen auch die gleichen Selektoren aus der
standard.css sein, wenn sich deren Werte ändern
Netscape 4 sperren
Das folgende Beispiel leitet den Netscape 4 auf eine separate Seite um, die nur noch einen Hinweis enthält, dass die Seite mit diesem Browser nicht zu betrachten ist. Dieser Weg empfiehlt sich, wenn man auf die letzten Netscape 4-User verzichten kann oder sich der Programmieraufwand für diesen Browser nicht mehr lohnt.
,
,
,
,
,
,
<script type="text/javascript"><!--
if(navigator.appName.indexOf("Netscape") > -1 &&
navigator.appVersion.substr(0,1) <= "4")
parent.location.href="netscape4.htm";
//--></script>
Dieses Javascript fragt den Browsernamen und die Version ab. Ist es ein
Netscape und die Verion 4.x, ruft die Zeile
parent.location.href="netscape4.htm"; die Seite netscape4.htm auf.
Sinnvollerweise solltest du auf dieser Seite darauf Hinweisen, dass der Netscape 4
auf diese Seite umgeleitet wurde und für den Besuch deiner Homepage ein anderer Browser benötigt wird.
Der Internet Explorer 5.0
Der Internet Explorer 5.0 ist natürlich besser als der Netscape 4, aber er hat auch keine komplette CSS 1+2-Umsetzung. Die größten Probleme dürfte er mit seiner fehlerhaften Berechnung des Box-Modell bereiten.
Browserweiche für Internet Explorer mit Javascript
Das folgende Beispiel lädt für den Internet Explorer 5 eine eigene CSS-Datei.
,
,
,
,
,
,
<link href="standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--
if(navigator.appVersion.indexOf("MSIE 5")>-1)
document.write('<link rel="Stylesheet" href="ie5.css"
type="text/css" />')
//--></script>
Das erste <link ... lädt zunächst die standard.css,
die die Stylesheets für die moderen Browser enthält.
Das Javascript fragt den Browsernamen. Ist es ein
MSIE und die Verion 5.x, schreibt die Zeile
document.write('... das <link>-Tag in das Dokument,
mit dem die ie5.css geladen wird.
ie5.css muss nun alle Stylesheet-Angaben der standard.css
so überschreiben, dass sie für den IE 5 passen.
Browserweiche für Internet Explorer mit Conditional Comments
Ab der Version 5 hat Microsoft im Internet Explorer ein nettes Feature eingefügt, dass Entwicklern die Möglichkeit bietet, Browsertyp und -version abzufragen und Quellcode browserabhängig auszuführen.
,
,
,
,
,
,
<!--[if IE 5]> <p>Das ist der Internet Explorer 5.</p> <![endif]-->
Dieses Beispiel stellt den Text Das ist der Internet Explorer 5. dar,
wenn es sich um einen Internet Explorer 5 handelt.
Der Trick von Microsoft ist, Bedingungen innerhalb von Kommentar-Tags zu erlauben.
Diese werden von anderen Browsern ignoriert. Die Zeile [if IE 5] fordert
einen Internet Explorer ab der Version 5. Ist dies der Fall, wird der Quellcode bis zur
Zeile ![endif] analysiert und ausgeführt. Erlaubt ist jegliche Form von Code,
wie HTML, XHTML, CSS und Scripte. Du kannst also für unterschiedliche Versionen auch unterschiedliche
Stylesheets zulassen:
,
,
,
,
,
,
<!--[if IE 5]> <style type="text/css"> Stylesheets für den IE 5 </style> <![endif]--> <!--[if gte IE 6]> <style type="text/css"> Stylesheets für den IE ab Version 6 (größer oder gleich 6) </style> <![endif]--> <!--[if lt IE 6]> <link rel="Stylesheet" href="ie5.css" type="text/css" /> <![endif]-->
Die Syntax ist <!--[if IE Version]> HTML <![endif]-->.
Für Version setzt du die gewünschte Versionsnummer ein. Erlaubt ist eine
Ganzzahl oder eine Zahl mit maximal vier Nachkommastellen. Für die Version 5.0.4.5.3
müsstest du z.B. 5.0453 angeben.
Weitere Operatoren sind:
| Operator | Erläuterung / Beispiel |
|---|---|
| ! | Not-Operator.<!--[if !IE 5.5]> Wenn nicht Version 5.5 <![endif]--> |
| lt | Kleiner-als-Operator.<!--[if lt IE 6]> Wenn kleiner als Version 6 <![endif]--> |
| lte | Kleiner-als oder Ist-Gleich-Operator.<!--[if lte IE 5.5]> Wenn kleiner oder gleich Version 5.5 <![endif]--> |
| gt | Größer-als-Operator.<!--[if gt IE 5]> Wenn größer als Version 5 <![endif]--> |
| gte | Größer-als- oder Ist-Gleich-Operator.<!--[if gte IE 5.5]> Wenn größer gleich Version 5 <![endif]--> |
Attributabhängige Selektoren als Browserweiche
Attributabhängige Selektoren kennen z.Z. nur der Mozilla und der Netscape ab Version 6 und Opera. Der Internet Explorer bis zur Verision 6 und der Netscape 4 kennen sie nicht. Du kannst sie also als Browserweiche verwenden:
,
,
,
,
,
,
.pcol { color:red; }
*[class="pcol"] { color:blue; }
...
<p class="pcol">
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern
</p>
In diesem Beispiel wird einem <p>-Tag mit dem class-Selektor
class="pcol" eine rote Schriftfarbe
zugewiesen.
Die nächste Zeile überschreibt diesen Wert mit blue. Dafür wird ein
Attributabhängiger Selektor verwendet,
den nur Mozilla und Netscape ab der Version 6 kennen. Der Internet Explorer ignoriert diese
Zeile einfach und zeigt die Schrift in rot an.