JavaScript:

Browserweiche über Javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="JavaScript">
// Browserweiche
if (navigator.userAgent.indexOf('Opera') > 0) {
    // Opera
    document.write('<link rel="stylesheet" href="css/opera.css" type="text/css">');
}

if (navigator.userAgent.indexOf('MSIE') > 0 && navigator.userAgent.indexOf('Opera') < 0) {
    // MSIE
    document.write('<link rel="stylesheet" href="css/msie.css" type="text/css">');
}

if (navigator.userAgent.indexOf('Netscape') > 0) {
    // Netscape
    document.write('</link><link rel="stylesheet" href="css/netscape.css" type="text/css">');
}
</link></script>

Diese Browserweiche ist relativ schnell, hat aber den Nachteil, wenn der Besucher JavaScript deaktiviert hat, nützt sie nicht.

PHP:

Browserweiche über PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// Browserweiche
if (strstr($_SERVER['HTTP_USER_AGENT'], 'Opera')) {

    // Opera
    echo '<link rel="stylesheet" href="css/opera.css" type="text/css">';
}

if (strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE') && !strstr($_SERVER['HTTP_USER_AGENT'], 'Opera')) {
    // MSIE
    echo '<link rel="stylesheet" href="css/msie.css" type="text/css">';
}

if (strstr($_SERVER['HTTP_USER_AGENT'], 'Netscape')) {
    // Netscape
    echo '</link><link rel="stylesheet" href="css/netscape.css" type="text/css">';
}
?>

Diese ähnelt im Aufbau ganz stark der JavaScript-Version, und läuft auch wenn JavaScript vom Besucher deaktiviert wurde, hat allerdings den Nachteil, das auf dem Server auf dem die Seite gehostet wird, auch PHP installiert sein muss.

Der Nachteil beider scriptbasierender Browserweichen ist das sie nicht funktionieren, wenn der User-Agent des Browsers soweit verändert wurde, das der Browser aus diesem nicht mehr hervorgeht.

Conditional Comments:

Mit solchen Kommentaren kann man lediglich den MSIE beeinflussen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>CSS-basiertes Layout</title>
  <link rel="stylesheet" type="text/css" href="basis.css">

  <style type="text/css">@import url(modern_ohne_ie.css) all;</style>

  <!--[if IE]>
   <style type="text/css">@import url(ie.css);</style>
 < ![endif]-->

  <!--[if IE 6]>
   <style type="text/css">@import url(ie6.css);</style>
 < ![endif]-->

  <!--[if lt IE 7]>
   <style type="text/css">@import url(ie5-6.css);</style>
 < ![endif]-->

  <!--[if lte IE 5.5999]>
   <style type="text/css">@import url(ie55-.css);</style>
 < ![endif]-->

  <!--[if gte IE 5.5]>
   <style type="text/css">@import url(ie55+.css);</style>
 < ![endif]-->

</link></head>
<body>
  <!-- HTML-Quelltext -->
</body>
</html>

Wie an den Beispielen zu sehen, können auch Versionsangaben gemacht werden, die der Internet Explorer mit seiner im Windows-System eingetragenen Versionsnummer vergleicht.

Die in den Conditional Comments referenzierten CSS-Dateien werden von folgenden Versionen des Internet Explorer geladen:

[if IE]: alle Versionen (ab 5.0),
[if IE 6]: alle 6er-Versionen,
[if lt IE 7]: alle Version vor 7 (less-than = kleiner als),
[if lte IE 5.5999]: alle Version bis 5.5 (less-than or equal = kleiner oder gleich),
[if gte IE 5.5]: alle Version ab 5.5 (greater-than or equal = größer oder gleich).

Spezielle Browserweichen (CSS-Hacks):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Browserweichen</title>
<style type="text/css">
  body {
    color: white; background: black;
    font-family: Helvetica, Arial, sans-serif;
  }
  p {
    padding: 0.2em;
  }

  #attribut {
    color: red;
  }
  p[id]#attribut {
    color: lime;
  }
  p[id] {
    border: 1px solid green;
  }

  #childselector {
    color: red;
  }
  html>body #childselector {
    color: lime;
  }

  #starhtml {
    color: lime;
  }
  * html #starhtml {
    color: red;
  }

  #starplushtml {
    color: lime;
  }
  *:first-child+html #starplushtml {
    color: red;
  }

  #comment {
    color: red;
  }
  #comment/* */ {
    color: lime;
  }

  #atmedia {
    color: red;
  }
  @media all {
    #atmedia {
      color: lime;
    }
  }

  #element {
    color: red;
  }
  p#element {
    color: lime;
  }

  #tanhack {
    color: lime;
  }
  * html #tanhack {
    color: red;
    c\olor: lime;
  }
</style>

<style type="text/css">
  #tantek {
    color: red;
  }
  #tantek {
    voice-family: ""}"";
    voice-family: inherit;
    color: lime;
  }
</style>
</head>
<body>
<h1>CSS-Browserweichen</h1>
<p>Die folgenden Beispiele werden standardkonform mit grüner Schrift
   im Rahmen angezeigt, ansonsten mit roter Schrift ohne Rahmen.</p>

<p id="attribut">Attribut-Selektor:
   wird vom Internet Explorer ignoriert und definiert hier alle Rahmen.</p>
<p id="childselector">Kind-Selektor:
   wird vom Internet Explorer ignoriert.</p>
<p id="starhtml">Star-HTML:
   wird fälschlich vom Internet Explorer interpretiert.</p>
<p id="starplushtml">Star-Plus-HTML:
   wird fälschlich vom Internet Explorer 7 interpretiert.</p>
<p id="comment">Selektor-Kommentar:
   wird vom Internet Explorer bis Version 5 für Windows und Mac ignoriert.</p>
<p id="atmedia">Medienangabe:
   wird vom Internet Explorer 4 für Windows und den Mac-Versionen ignoriert.</p>
<p id="element">Element-spezifischer Selektor:
   wird vom Netscape 4 ignoriert.</p>

<p id="tantek">Tantek-Hack:
   wird vom Internet Explorer erst ab Version 6 korrekt interpretiert<br />
   - im Netscape 4 kommt es hierdurch zu Fehlern im gesamten Style-Bereich!</p>
<p id="tanhack">Tan-Hack:
   beeinflusst nur den Internet Explorer vor Version 6<br />
   - eine Kombination des Star-HTML- und Tantek-Hacks für einzelne Definitionen.</p>

</body>
</html>

Erläuterung:

Attribut-Selektor

1
2
3
p[id] {
  eigenschaft:wert;
}

Selektiert ein Element (hier

), welches ein id-Attribut mit beliebigem Attributwert aufweist – und damit alle hier angeführten Beispiele. Gleichbedeutend zur Angabe der #ID ist dies im Grunde überflüssig, erfüllt aber den Zweck, alle Internet Explorer für Windows bis Version 6 und Netscape 4 auszuschließen.

Kind-Selektor

1
2
3
html>body #ID {
  eigenschaft:wert;
}

Selektiert ein Element mit der ID „ID“, das sich innerhalb des Elements body befindet, welches wiederum ein direktes Kind-Element von html ist. Dies extra anzugeben wäre an sich überflüssig, es schließt aber ebenfalls alle Internet Explorer für Windows bis Version 6 und Netscape 4 aus. Achtung: Der Selektor body>#ID würde von älteren Versionen des Internet Explorer falsch interpretiert werden.

Star-HTML-Hack

1
2
3
* html #ID {
  eigenschaft:wert;
}

Dies ist zwar ein valider, aber unsinniger Selektor, da html kein Elternelement hat (der Universalselektor * steht für ein beliebiges Element). Alle Internet Explorer für Windows bis Version 6 akzeptieren diese Notation jedoch und interpretieren die nachfolgenden Deklarationen. Dieser Selektor schließt also alle übrigen Browser einschließlich Netscape 4 aus.

Star-Plus-HTML-Hack

1
2
3
*:first-child+html #ID {
  eigenschaft:wert;
}

Dies ist ebenso ein valider wie unsinniger Selektor, der nur vom Internet Explorer 7 (und vielleicht auch künftigen Versionen) akzeptiert wird. Der einfachere Selektor *+html würde leider auch vom Opera fälschlich berücksichtigt. Beachten Sie, dass Sie diesen Selektor nicht mit dem Star-HTML-Hack in einer Regel kombinieren können und ggfls. zwei Regeln notieren müssen, um alle Internet-Explorer anzusprechen.

Selektor-Kommentar

1
2
3
#ID/* */ {
  eigenschaft:wert;
}

Ein CSS-Kommentar unmittelbar nach dem Selektor schließt den Internet Explorer 4 und 5 für Windows und Mac aus.

Medienangabe

1
2
3
4
5
@media all {
  #ID {
    eigenschaft:wert;
  }
}

Diese Variante selektiert hier ein Element mit der ID „ID“ für alle Seite Medientypen, wodurch ältere Browser ausgeschlossen werden: der Internet Explorer 4 für Windows und alle Mac-Versionen sowie Netscape 4.

Element-spezifischer Selektor

1
2
3
p#ID {
 eigenschaft:wert;
}

Selektiert ein Element (hier </p><p>) mit der ID „ID“, was den Ausschluss von Netscape 4 zur Folge hat.

Tan-Hack (Modified Simplified Box Model Hack)

1
2
3
* html #id {
  e\igenschaft:wert;
}

Die angeführte Notation setzt die innerhalb der nach unten Star-HTML-Browserweiche zunächst an ältere Internet Explorer für Windows angepassten Eigenschaften für den Internet Explorer 6 wieder zurück. Setzen Sie das Escape-Zeichen \ an eine beliebige Stelle innerhalb der Eigenschaft, jedoch nicht direkt vor einen der Buchstaben a bis f, da dieser sonst als hexadezimaler Wert interpretiert werden würde. Diese Browserweiche eignet sich ebenfalls zur Korrektur des falschen Box-Modells für ältere Windows Internet Explorer, ist jedoch wegen der dreifachen Angabe eines jeden Wertes etwas aufwändig. Durch die Kombination mit der Star-HTML-Browserweiche werden Probleme mit anderen Browsern ausgeschlossen.

Tantek-Hack

1
2
3
4
5
6
selektor {
  eigenschaft:wert;      /* Deklaration für IE 5.x */
  voice-family:""}"";  /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
  voice-family:inherit;
  eigenschaft:wert;      /* Korrektur fuer andere Browser */
}

Diese Methode beruht auf der Ausnutzung eines Fehlers im Internet Explorer der Version 5.x. Zunächst wird die für den Internet Explorer 5.x vorgesehene Deklaration angeführt und anschließend der Sprachausgabe-Eigenschaft Seite voice-family der unsinnige, aber gültige Wert „}“ zugewiesen – die inneren Hochkommata sind gemäß CSS-Syntax mit Backslashes maskiert (CSS-Escape-Sequenz) und daher Bestandteil des Wertes. Korrekt arbeitende Browser werden davon nicht negativ beeinflusst, von alten Versionen des Internet Explorer jedoch wird keine der nachfolgenden Angaben beachtet, da sie die geschweifte Klammer als Ende der Regel interpretieren. Die in der ersten Zeile definierte Deklaration wird zunächst von allen Browsern akzeptiert, die nachfolgende Korrektur für standardkonforme Browser übergeht der IE 5.x. Somit eignet sich diese Browserweiche zur Korrektur des falschen Box-Modells von Microsoft bei Dokumenten, in denen der Internet Explorer 6 über die Seite Dokumenttyp-Deklaration in den Seite standardkonformen Modus versetzt wurde. Verwenden Sie den Tantek-Hack nur in einer vor Netscape 4 verborgenen CSS-Datei, da in diesem Browser ein schwerer Fehler bei der Interpretation des gesamten Style-Bereichs verursacht wird.

Die auf fehlerhafter oder unzureichender CSS-Implementierung aufbauenden Browserweichen können in aktuellen Browsern unerwünschte Begleiterscheinungen haben. Auch ist nicht ausgeschlossen, dass künftige Browserversionen zwar weiterhin den Fehler enthalten, den Sie mittels eines Hacks korrigieren, dies jedoch nicht mehr funktioniert, da just die Programmstelle korrigiert wurde, die die Nutzung des Hacks erst ermöglicht hat. Sie sollten daher das über eine Browserweiche erzielte Ergebnis mit unterschiedlichen Browsern kritisch begutachten und dies in regelmäßigen Abständen mit neu erschienenen Versionen wiederholen.

Auf der sicheren Seite sind Sie, wenn Sie nach Möglichkeit weitestgehend auf den Einsatz von CSS-Hacks verzichten.

Artikel / Seite weiterempfehlen

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>