Hier bist Du: Home « Workshops « Workshop: Browserweiche

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.

 

nach oben

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.

 

nach oben

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.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<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

 

nach oben

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.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<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.

 

nach oben

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.

 

nach oben

Browserweiche für Internet Explorer mit Javascript

Das folgende Beispiel lädt für den Internet Explorer 5 eine eigene CSS-Datei.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<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.

 

nach oben

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.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<!--[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:

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<!--[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]-->

 

nach oben

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:

Beispiel

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1

.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.

 

nach oben