Index
Informationen
Leider haben verschiedene Browser verschiedenste Probleme mit der Interpretation von Styleanweisungen. Um Trotz der Fehler mancher Browser korrekt mit CSS arbeiten zu können, gibt es einige Tricks, die sich die Fehler der Browser zunutze machen, um einzelne Anweisungen zu verstecken, oder browserspezifisch unterschiedliche Stylesheets zu laden. Wie Sie feststellen werden gibt es keine Ideallösung, sondern jeweils nur Tricks für einzelne spezifische Probleme oder Browser. Letztlich gilt es, die optimale Kombination verschiedener Tricks zu wählen, aber auch abzuwägen, für welche Browser sich der Aufwand lohnt.
Conditional Comments
Die sogenannten Conditional Comments sind eine Erfindung aus dem Hause Microsoft. Es handelt sich dabei um Kommentare, in denen sich Abfrageverzweigungen befinden können. Da Internet Explorer (im Gegensatz zu anderen Browsern) auch HTML-Kommentare interpretiert, ist es möglich Anweisungen für den IE darin zu verbergen.
Ein Beispiel;
Die zwischen den beiden Anweisungen liegenden HTML Elemente werden nur ausgegeben, wenn der Browser ein Internet Explorer der Version 5 (unterversionen wie 5.5 eingeschlossen) ist. Es ist allerdings auch möglich, die genaue Versionsnummer (also z.B. [if IE 5.5]) anzugeben. Alle Browser anderer Hersteller (Opera, Firefox, Konqueror, ...) fassen den gesamten Block als Kommentar auf.
Wenn Sie erreichen wollen, dass diese Browser die HTML Elemente zwischen den Kommentaren anzeigen, so erreichen Sie das durch den folgenden Code:
Durch das fehlen der Bindestriche werden die Tags nicht als Kommentar erkannt. Um genau zu sein entsprechen sie gar keinem bekannten HTML-Element und werden somit ignoriert. Der Inhalt dazwischen wird normal angezeigt.
Wie Sie vielleicht festgestellt haben befindet sich im zweiten Beispiel ein ! vor IE. Dieses entspricht dem NOT-Operator, also einer Verneinung des nachfolgenden Ausdrucks.
Hier eine Liste der gültigen Vergleichsoperatoren:
Mehr zu Conditional Comments finden Sie im Microsoft Developer Network unter:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp.
Ein Beispiel;
<!--[if IE 5]>
html-Elemente...
<![endif]-->
html-Elemente...
<![endif]-->
Die zwischen den beiden Anweisungen liegenden HTML Elemente werden nur ausgegeben, wenn der Browser ein Internet Explorer der Version 5 (unterversionen wie 5.5 eingeschlossen) ist. Es ist allerdings auch möglich, die genaue Versionsnummer (also z.B. [if IE 5.5]) anzugeben. Alle Browser anderer Hersteller (Opera, Firefox, Konqueror, ...) fassen den gesamten Block als Kommentar auf.
Wenn Sie erreichen wollen, dass diese Browser die HTML Elemente zwischen den Kommentaren anzeigen, so erreichen Sie das durch den folgenden Code:
<![if !IE 5]>
...
<![endif]>
...
<![endif]>
Durch das fehlen der Bindestriche werden die Tags nicht als Kommentar erkannt. Um genau zu sein entsprechen sie gar keinem bekannten HTML-Element und werden somit ignoriert. Der Inhalt dazwischen wird normal angezeigt.
Wie Sie vielleicht festgestellt haben befindet sich im zweiten Beispiel ein ! vor IE. Dieses entspricht dem NOT-Operator, also einer Verneinung des nachfolgenden Ausdrucks.
Hier eine Liste der gültigen Vergleichsoperatoren:
| Operator | Funktion |
|---|---|
| ! |
NOT-Operator Ausdruck ist wahr, wenn die genannte Bedingung nicht zutrifft. |
| lt |
less than Ausdruck ist wahr, wenn der Wert kleiner als der Vergleichswert ist. |
| gt |
greater than Ausdruck ist wahr, wenn der Wert größer als der Vergleichswert ist. |
| lte |
less than / equal Ausdruck ist wahr, wenn der Wert kleiner oder gleich dem Vergleichswert ist. |
| gte |
greater than / equal Ausdruck ist wahr, wenn der Wert größer oder gleich dem Vergleichswert ist. |
Mehr zu Conditional Comments finden Sie im Microsoft Developer Network unter:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp.
Die @import-Weiche
Wie Sie vielleicht bereits wissen, ist es möglich Stylesheetcode durch die Angabe von @import url(...) einzubinden. Diese Browserweiche macht sich Fehler bei der Interpretation der @import-Angabe zunutze. Dabei werden zunächst die 'falschen' Stylesheets (für fehlerhafte Browser) mithilfe des <link> Elementes eingebunden. Danach wird ein Stylesheet mit den 'korrekten' Stilen per @import geladen. Nach dem Gewichtungssystem von CSS werden alle mehrfach vorkommenden Anweisungen durch die 'später' im Dokument stehenden überschrieben. Es ist also möglich, Anweisungen des ersten Stylesheets, welche nur für Browser mit Interpretationsproblemen gedacht waren, im zweiten Stylesheet zu überschreiben.
Hier ein Beispiel zur Verdeutlichung:
Je nach Schreibweise der @import Anweisung ist es sogar möglich, unterschiedliche Brwoser 'auszusperren'.
Es folgt eine Liste, der Browser mit Interpretationsproblemen.
Hier ein Beispiel zur Verdeutlichung:
<html>
<head>
<title>Dokumentname</title>
<link rel="stylesheet" type="text/css" href="url_zum_falschen_stylesheet">
<style type="text/css">
<!--
@import url(url_des_richtigen_stylesheet);
-->
</style>
</head>
<body>
<p class="big">Seiteninhalte</p>
</body>
</html>
<head>
<title>Dokumentname</title>
<link rel="stylesheet" type="text/css" href="url_zum_falschen_stylesheet">
<style type="text/css">
<!--
@import url(url_des_richtigen_stylesheet);
-->
</style>
</head>
<body>
<p class="big">Seiteninhalte</p>
</body>
</html>
Je nach Schreibweise der @import Anweisung ist es sogar möglich, unterschiedliche Brwoser 'auszusperren'.
Es folgt eine Liste, der Browser mit Interpretationsproblemen.
| Schreibweise | wird nicht interpretiert von |
|---|---|
|
@import url("url_des_stylesheet") (mit Anführungszeichen) |
Netscape 4.x, Internet Explorer 3 und 4 (Windows) Internet Explorer 4.01 und 4.5 (Mac) Konqueror 2.1.2 (Linux) |
|
@import url(url_des_stylesheet) (ohne Anführungszeichen) |
Netscape 4.x, Internet Explorer 3 und 4 (Windows) Achtung: IE4 liest das Stylesheet, wenn es im selben Verzeichnis liegt, wie die HTML Dateien. |
|
@import "url_des_stylesheet" (ohne url() ) |
Netscape 4.x, Internet Explorer 3 und 4 (Windows) Konqueror 2.1.2 (Linux) |
Filtern durch Selektoren
Da ältere Browser oft Probleme mit Selektoren haben bietet sich hier eine gute Möglichkeit, für einen Filter. Das erste Beispiel verwendet den Attribut-Selektor, es werden alle <div>-Elemente angesprochen, die eine Id besitzen. Im zweiten Beispiel wird der Kind-Selektor benutzt, der Stil bezieht sich also auf alle Absätze, die 'Kinder' von <div>-Elementen sind.
| Schreibweise | wird nicht interpretiert von |
|---|---|
|
div[id] { ... } |
Netscape 4.x, Internet Explorer 6 und älter (Windows) Internet Explorer 4.01 und 5 (Mac) Opera 3.6 Achtung: iCab 2.51 (Mac) wendet den Stil aud alle div-Elemente an, statt ihn zu ignorieren. |
|
div>p { ... } |
Netscape 4.x, Internet Explorer 6 und älter (Windows) Internet Explorer 4.01 und 5 (Mac) iCab 2.51 (Mac) |
Hochpass-Filter
Dieser Filter, entwickelt von Tantek Çelik, hält ältere Browser vom Laden eines externen Sylesheet ab. Tantek Çelik macht sich hier die Probleme älterer Browser mit Escape-Sequenzen zunutze.
In der HTML Datei wird mithilfe des <link>-Elementes ein Stylesheet eingebunden
In diesem Stylesheet befindet sich der folgende Code
Ältere Browser werden durch die Kombination \"\{ aus dem Gleichgewicht gebracht. Sie versuchen das erste Stylesheet ("null?\") zu importieren, welches keine Anweisungen enthält, und erhalten dann als nächste Anweisung:
Dies ist keine gültige CSS Anweisung und wird gefiltert.
Aktuellere Browser sehen einfach 2 zu importierende Stylesheets, sie verzweiffeln nicht an der Kombination \"\{ und laden zuerst das leere und danach das richtige Stylesheet.
Achtung: Sie müssen tatsächlich über eine Stylesheet-Datei mit dem Namen 'null' verfügen, damit dieser Filter funktioniert.
Das Stlyesheet wird von den folgenden Browsern geladen:
In der HTML Datei wird mithilfe des <link>-Elementes ein Stylesheet eingebunden
<link rel="stylesheet" type="text/css" href="filter.css" />
In diesem Stylesheet befindet sich der folgende Code
@import "null?\"\{";
@import "richtiges_stylesheet.css";
@import "richtiges_stylesheet.css";
Ältere Browser werden durch die Kombination \"\{ aus dem Gleichgewicht gebracht. Sie versuchen das erste Stylesheet ("null?\") zu importieren, welches keine Anweisungen enthält, und erhalten dann als nächste Anweisung:
{";@import "richtiges_stylesheet.css";
Dies ist keine gültige CSS Anweisung und wird gefiltert.
Aktuellere Browser sehen einfach 2 zu importierende Stylesheets, sie verzweiffeln nicht an der Kombination \"\{ und laden zuerst das leere und danach das richtige Stylesheet.
Achtung: Sie müssen tatsächlich über eine Stylesheet-Datei mit dem Namen 'null' verfügen, damit dieser Filter funktioniert.
Das Stlyesheet wird von den folgenden Browsern geladen:
- Internet Explorer 5 und neuer (Mac)
- Internet Explorer 6 und neuer (Windows)
- Netscape 6 oder neuer
- Opera 5 oder neuer
Box Model Hack / Tanteks Hack
Beim Box Model Hack geht es um ein Problem, das beim Internet Explorer 5.x (Windows) im Zusammenhang mit Kästen auftritt. Laut CSS-Spezifikation gibt die Eigenschaft width einen Kastens dessen Innenbreite an. Rahmen, Innen- und Aussenabstände sind dieser Breite noch hinzuzurechnen. Gleiches gilt natürlich für die Höhe von Elementen. Ein Kasten mit den Angaben width: 300px; und padding:20px; sollte also insgesamt 340px breit sein (300px Innenbreite und jeweils 20px Abstand rechts/links). Internet Explorer 5.x interpretiert das CSS1-Kastenmodell falsch und rechnet Rahmen und Innenabstand in die Breite ein. Der Kasten ist somit insgesamt nur 300px breit. Bei Internet Explorer 6 tritt dieses Problem nur auf, wenn eine falsche Doctype Angabe gemacht wird. Gerade bei exakt aufeinander abgestimmten Kästen kann dieser Effekt sehr ärgerlich sein.
Leider gibt es wiederum Browser (z.B. Opera 5), die zwar das Kastenmodell richtig interpretieren, jedoch wie der IE5 an der Syntax "\"}\"" scheitern. Dafür wurde die zweite Anweisung (html>body #box) eingefügt, die über den Kind-Selektor nochmals die richtige Breite zuweist. Da der Internet Explorer 5.x auch diese Anweisung nicht interpretieren kann, behält er die erste Breite (von 340px) bei.
Achtung, dieser Trick funktioniert nicht bei Netscape 4.x Browsern. Sie sollten ihn also nur einsetzen, wenn Sie sicher sein können, dass er nicht von Netscape 4 interpretiert wird. Dies erreichen Sie zum Beispiel durch den @import-Trick.
|
<style type="text/css">
#box { width: 340px; padding: 20px; voice-family: "\"}\""; voice-family: inherit; width: 300px; } html>body #box { width: 340px; } |
Der Trick von Tanteks Çelik macht sich eine Interpretationsschwäche des Internet Explorer zunutze. Dieser kann die Syntax voice-family: "\"}\""; nicht interpretieren und bricht die Abarbeitung der Anweisung ab. Er verwendet die Angabe 340px für die Breite der Box, während andere Browser die Anweisung ignorieren, und die 300px für die Breite benutzen. |
Leider gibt es wiederum Browser (z.B. Opera 5), die zwar das Kastenmodell richtig interpretieren, jedoch wie der IE5 an der Syntax "\"}\"" scheitern. Dafür wurde die zweite Anweisung (html>body #box) eingefügt, die über den Kind-Selektor nochmals die richtige Breite zuweist. Da der Internet Explorer 5.x auch diese Anweisung nicht interpretieren kann, behält er die erste Breite (von 340px) bei.
Achtung, dieser Trick funktioniert nicht bei Netscape 4.x Browsern. Sie sollten ihn also nur einsetzen, wenn Sie sicher sein können, dass er nicht von Netscape 4 interpretiert wird. Dies erreichen Sie zum Beispiel durch den @import-Trick.
media-Attribut
Der Netscape Navigator 4.x hat Schwierigkeiten Stylesheets anhand ihrer media-Zuweisung zu verarbeiten. Er erkennt nur Stylesheets mit der Zuweisung media="screen". Wenn Sie ein Stylesheet wiefolgt einbinden, sollte Netscape 4.x der einzige Browser sein, der das Stylesheet ignoriert.
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Der Kommentar-Trick
Wenn Sie einen Kommentar direkt hinter einen Selektor setzen, ignorieren manche Browser die nachfolgenden Werte.
Hier ein Beispiel:
Diese Angabe wird von Internet Explorer 5 (Win), sowie Internet Explorer 4.01 und 5 (Mac) ignoriert.
Hier ein Beispiel:
#topic/* */ width: 250px
Diese Angabe wird von Internet Explorer 5 (Win), sowie Internet Explorer 4.01 und 5 (Mac) ignoriert.
Nur Internet Explorer ansprechen
Nur allzu of verzweiffeln Webentwickler, die Ihre Arbeit während der Enwicklung in Browsern wie Opera oder Firefox getestet haben beim ersten Anblick ihres Werkes mit Internet Explorer. Leider ist eine Vielzahl gültiger Standards in Internet Explorer vollkommen falsch implementiert, wodurch es immer wieder zu Problemen bei der Positionierung kommen kann. Die folgenden Weichen sprechen nur Internet Explorer an, wodurch sich eine Möglichkeit bietet, einige extra Style-Anweisungen für den Internet Explorer zu verwenden.
Diese Anweisung spricht nur Internet Explorer (Version: 4, 5, 5.5, 6) an
Diese Anweisung spricht nur Internet Explorer (Version: 4, 5.5, 6) an
Diese Anweisungen sprechen nur Internet Explorer (Version: 4, 5, 5.5) an
Beachten Sie im ersten Beispiel, dass statt einem Doppelpunkt ein = Zeichen verwendet wurde und das abschliessende Semikolon fehlt. Das zweite Beispiel ist syntaktisch eigentlich falsch, da es vor dem html Element kein Element * geben kann, auf das ein Style angewendet werden könnte und da diesem auch kein weiteres html Element folgen könnte.
Diese Anweisung spricht nur Internet Explorer Version 4 an
Auch hier ein fehlende Semikolon und eine nicht sinnvolle Anweisung html.dummy * body.
Diese Anweisung spricht nur Internet Explorer Version 6 an
Diese Anweisung spricht nur Internet Explorer (Version: 4, 5, 5.5, 6) an
* html #test { color:lime }
Diese Anweisung spricht nur Internet Explorer (Version: 4, 5.5, 6) an
*.* #test { width:200px }
Diese Anweisungen sprechen nur Internet Explorer (Version: 4, 5, 5.5) an
#test { width=150px }
* html div {content:"\";}* html #test { width:200px }
* html div {content:"\";}* html #test { width:200px }
Beachten Sie im ersten Beispiel, dass statt einem Doppelpunkt ein = Zeichen verwendet wurde und das abschliessende Semikolon fehlt. Das zweite Beispiel ist syntaktisch eigentlich falsch, da es vor dem html Element kein Element * geben kann, auf das ein Style angewendet werden könnte und da diesem auch kein weiteres html Element folgen könnte.
Diese Anweisung spricht nur Internet Explorer Version 4 an
html.dummy * body #test { width: 100px }
Auch hier ein fehlende Semikolon und eine nicht sinnvolle Anweisung html.dummy * body.
Diese Anweisung spricht nur Internet Explorer Version 6 an
#test {/**/*/ c\olor:lime; /* */}
Nur Opera ansprechen
Ältere Opera Browser (vor Version 8) stellen teilweise Schriftgrößen oder absolut positionierte Elemente fehlerhaft dar. Die folgenden, von Kristof Lipfert entwickelten Browserweichen führen dazu, dass der Code nur von Opera Browsern verarbeitet wird.
|
Browserweichen für Opera 4-6
html * body #test[id] {
color:lime; } @media screen { html * body #test { font-size:1.6em; } } |
Browserweiche für Opera 7 (ab v7.2)
html:first-child>b\ody #test {
color:lime; font-size:1.6em; } |
Browserweichen per CSS (Kristof Lipfert)
Kristof Lipfert (Dipl.-Des.(FH)) hat eine Tabelle mit mehr als 100 verschiedenen syntaktischen Kombinatinationen und deren Browserverträglichkeit zusammengestellt. Die Tabelle behandelt auch neuere Browser wie Netscape 7 oder Opera 8. Sie erreichen die Seite unter der Domain http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html.
Validation Info
Dieses Dokument entspricht den aktuellen HTML / CSS Standards.
