Die Top 10 CSS-HacksWebdesign mit CSS für alle Browser

Browser-Problematik

Die Top 10 CSS-Hacks

Der Begriff CSS-Hack ist negativ behaftet. Die Gefühle pendeln von Hauruck-Verfahren bis zu unsauberer Lösung. Ein Hack umgeht immer ein bestimmtes, unerwünschtes Verhalten. Trotzdem kommt man ohne Hacks oft nicht weiter: Um Fortschritt bemühte Browser-Hersteller haben manche im CSS-Standard vorgesehenen Verhalten implementiert und manche nicht. Dazu kommt, dass auch der CSS-Standard nicht frei von Fehlern ist. Kleine Ungenauigkeiten führen dazu, dass die Browser-Hersteller bei ihren Interpretationen raten können. Und wenn zwei unterschiedlich raten, ergibt sich für den Webdesigner ein Problem.

Das Ziel eines Hacks ist immer dasselbe: Er soll für bestimmte Problem-Browser CSS-Befehle so anbieten, dass die Website auf dem Problem-Browser genauso aussieht wie auf dem standardkonformen Browser. Hacks nutzen dazu Eigenheiten und proprietäre Funktionen der jeweiligen Browser. Schließlich ist der Zweck der Übung, dass der Nutzer auf jeder Plattform dasselbe sehen kann.

Pro & Contra

Die Top 10 CSS-Hacks

Dabei haben Hacks allerdings auch einige Nachteile: Zum einen machen sie die Arbeit und das CSS deutlich komplizierter. Sie sind teilweise schwierig zu verstehen und insofern auch leicht falsch einzusetzen. Heikler ist, dass Hacks nur Schwachstellen ausnützen. Werden diese in zukünftigen Browsern geschlossen, funktioniert im Zweifel der Hack nicht mehr oder schadet sogar in der Darstellung. Der neue Internet Explorer 7 hat beispielsweise einige Internet-Explorer-Hacks ad absurdum geführt und erzeugt für betroffene Webseiten Aktualisierungsbedarf.

Die Frage, ob ein Hack zukunftssicher ist, ist entscheidend. Analog sind sichere Hacks eigentlich nur solche, die Schwachstellen in nicht mehr weiterentwickelten Browsern ausnutzen (darunter der @import-Hack und Hacks für den Internet Explorer 5.x für den Macintosh). Andere Hacks bergen dagegen das Risiko, irgendwann nicht mehr aktuell zu sein.

Was ist hier also die richtige Taktik? Wer ein CSS-Layout entwickelt, beginnt am besten in einem nahezu standardkonformen Browser und testet dann mit den schwierigeren Kandidaten, zum Beispiel älteren Internet-Explorer-Versionen. Wer nicht darauf verzichten kann, dass das Layout bis auf den letzten Pixel in jedem Browser gleich aussieht, sollte sich mit den Hacks auseinander setzen und sich bewusst sein, dass er mit neuen Browsern testen muss.

In diesem Artikel stellen die Autoren populäre Hacks vor und geben eine Einschätzung, ob der Hack voraussichtlich zukunftssicher ist oder ob er schon im Internet Explorer 7 für Probleme sorgt.

Hack 1: @import

Die Top 10 CSS-Hacks

Die Unterstützung von Netscape 4.x schwindet in aktuellen Webprojekten zusehends. Dennoch, wer für Netscape 4 kein völliges Chaos hinterlassen möchte, kann den @import-Hack verwenden. Eigentlich handelt es sich dabei nicht um einen echten Hack, sondern simpel um die Tatsache, dass Netscape 4.x nur mit link verlinkte Stylesheets einbindet, nicht aber per @import importierte.

Bei Layout-orientiertem CSS gibt es damit allerdings ein Problem: Im Internet Explorer wird das importierte CSS nicht sofort beim Seitenaufbau angewendet, die Seite flackert also einmal. Die Alternative ist die Angabe eines Medientyps für das verlinkte Stylesheet, den der Netscape Navigator nicht kennt. Dazu gehört beispielsweise all oder die Kombination aus screen und projection. Nur screen allein genügt nicht, da Netscape 4.x das als für sich geeignet ansieht.

Hack 2: Kommentierte
Backslashes

Die Top 10 CSS-Hacks

Ein Exot ist der Internet Explorer 5.x für den Mac. Das größte Problem dieses Browsers ist, dass in Redmond eine andere Entwicklergruppe für den Mac zuständig war als für die Windows-Variante. Dadurch wurde der Internet Explorer für den Mac etwas standardkonformer, aber eben auch problematisch, da er beispielsweise auch auf konditionale Kommentare reagiert. Möchte man einen CSS-Befehl nur für diesen Browser ausliefern, ist also ein eigener Hack erforderlich. Dafür macht man sich einen Fehler im Browser zu Nutze: Ein Backslash vor dem Ende eines CSS-Kommentars entwertet das Kommentarende in jedem normalen Browser. Der Internet Explorer für den Mac ignoriert den Backslash, und dadurch sind die nachfolgenden Befehle für ihn unsichtbar:


div {
color: red;
}
/* Kommentar \*/
div {
color: blue;
}
/* Kommentar beendet */


Im obigen Beispiel ist die Schriftfarbe in div-Elementen also eigentlich Blau, nur der Internet Explorer für den Mac zeigt die Schrift Rot an. Dieser Hack gehört zu den sicheren Hacks, da er auf einem Fehler des Internet Explorer 5 für den Mac beruht und dieser Fehler in keinem modernen Browser erneut eingebaut wird.

Hack 3: Konditionale Kommentare

Die Top 10 CSS-Hacks

In der CSS-Layout-Entwicklung ist der Internet Explorer meistens das größte Problem – wenn man Netscape 4.x ignoriert. Vor allem Boxmodell-Bug und Konsorten im Internet Explorer 5.x können den Webdesigner zur Verzweiflung treiben. Deswegen sind viele Hacks dafür gedacht, Befehle speziell für den Internet Explorer zu verwenden oder sie speziell vor dem Internet Explorer zu verstecken. Genau dies hat Microsoft allerdings auch mit einer proprietären Funktion integriert, den konditionalen Kommentaren. Die versteckende Variante zeigt den HTML-Code innerhalb der konditionalen Kommentare nur in den Internet-Explorer-Versionen:

Alle Nicht-Internet-Explorer-Browser erkennen diesen Abschnitt dank <!-- am Anfang und --> am Ende als HTML-Kommentar an und integrieren alles darin Enthaltene.

Das Gegenstück sind konditionale Kommentare, die Code nur für nicht getestete Browser anzeigen. Hier wird der konditionale Kommentar als normales Tag getarnt.

Nicht IE

Alle Browser, die nicht der Internet Explorer sind, ignorieren die Tags, da sie sie nicht kennen. Die HTML-Tags und Inhalte innerhalb der Kommentare werden aber angezeigt. Nun ist noch die Frage, welche Tests zur Verfügung stehen? Die Tests in konditionalen Kommentaren beginnen mit if. Danach folgt die Funktionalität. Die einzig mögliche ist IE für die Erkennung der Browserversion des Internet Explorer.

Die Browserversion kann direkt nach der Funktionalität folgen:

Version 5 steht dabei für 5.0 und 5.5. Wenn Sie den Code nur für einen davon anwenden möchten, müssen Sie die Unterversion spezifizieren:

Um den Internet Explorer auszuschließen und den HTML-Code anzuzeigen, verwenden Sie folgende Variante:

Die anderen Browser

Hier kommt der Operator ! ins Spiel. Er entspricht dem logischen Nicht in anderen Programmiersprachen und sagt hier also »nicht für den Internet Explorer«. Er lässt sich selbstverständlich auch mit der Versionsnummer verwenden:

Nicht IE 5

Weitere Operatoren stehen ebenfalls zur Verfügung: lt steht für less than und bedeutet niedrigere Versionsnummer als, im Prinzip also Kleiner als. lte entspricht Kleiner gleich, gt Größer als und gte Größer gleich.

Konditionale Kommentare sind für alle HTML-Tags und Inhalte gedacht. Speziell bei CSS-Bugs eignen sie sich aber natürlich dazu, ein für den Internet Explorer bereinigtes CSS einzubinden:

In dem folgenden Beispiel wird dem Boxmodell-Bug mit konditionalen Kommentaren zu Leibe gerückt. Der Bug tritt auf, wenn man ein Box-Element wie einen div-Block oder Absatz mit Innenabstand und Rahmen versieht:


div {
width: 200px;
padding: 10px;
border: 10px red solid;
margin: 10px;
background-color: lightgrey;
color: blue;
}


Der Internet Explorer vor Version 6 zählt den Innenabstand und den Rahmen standardwidrig zur Breite beziehungsweise Höhe. Das heißt, hier werden die jeweiligen Boxen schmaler als in den standardkonformen Browsern. Abhilfe schafft ein CSS nur für den Internet Explorer 5.x, das die Breite oder Höhe um den Innenabstand und Rahmen für beide Seiten der Box erhöht:


div {
width: 240px;
}


Zum Testen können Sie übrigens auch einen Internet Explorer 6 verwenden. Entfernen Sie dazu einfach den korrekten Doctype oder fügen Sie die -Processing-Instruktion ein, um ihn in den Quirks-Modus zu schalten. Dann rendert er genauso falsch wie der Internet Explorer 5.

Die Grundüberlegung ist bei per konditionalen Kommentaren eingefügtem CSS, ob das CSS nur die wichtigsten Probleme beseitigt oder eine komplett eigene Internet-Explorer-Version ist. Letzteres ist vor allem in Anbetracht der recht guten Standard-Kompatibilität von Internet Explorer 6 und der noch besseren von Internet Explorer 7 wohl weniger sinnvoll. Stattdessen sollten nur die notwendigen Bugs von Internet Explorer 5.x per IE-eigenem CSS geheilt werden.

Aus Sicht besonders standardkonformer Websites sind konditionale Kommentare natürlich nicht optimal, denn schließlich sind sie nicht standardkonformer Code mitten in einer HTML-Seite. Ein Problem sind konditionale Kommentare, wenn Sie mehrere Internet Explorer-Versionen unter einem Betriebssystem betreiben möchten. Letzteres ist zum Testen recht praktisch, allerdings erkennt der konditionale Kommentar immer nur die installierte Internet-Explorer-Version, da die Basis eine Versionsangabe namens Version Vector in der Registry ist. Wenn Sie diese Angabe umbenennen, nimmt der Browser die Angaben des Standalone-IE und die konditionalen Kommentare klappen.

Hack 4: Boxmodell-Hack

Die Top 10 CSS-Hacks

Ein paar der bedeutsamsten CSS-Hacks stammen von Tantek Çelik, darunter der Boxmodell-Hack. Mit diesem Hack wird das Boxmodell-Problem direkt in CSS gelöst. Als Beispiel kommt hier ein einfacher Absatz zum Einsatz:

Die ersten Formatierungen sind ganz gewöhnlich und betreffen Innenabstände, Rahmen und Farben:


#box {
padding:10px;
border:10px blue solid;
background-color: #cccccc;
color: red;
}


Wird nun die Breite angegeben, ergibt sich dank der Innenabstände und Rahmen eine vom Standard abweichende Breite der Box für Internet Explorer 5.x:


#box {
width:200px;


Tanteks Hack verhindert das, indem er eine Schwäche des Internet Explorer 5.x ausnutzt: die valide CSS-Eigenschaft voice-family oder eine andere ungenutzte CSS-Eigenschaft, gefolgt von einer Kette aus Anführungszeichen, Backslashes und Klammern.

voice-family: "\"}\"";

Der Trick ist, dass der erste Backslash im Internet Explorer 5.x nicht als Entwertung des nachfolgenden Anführungszeichens verwendet wird. Dadurch ist für den IE 5.x der Befehl beendet.

Danach folgt dann eine schließende geschweifte Klammer, und die folgenden Anweisungen werden ignoriert. In diesen Anweisungen kann also nun die korrekte Breite für die anderen Standard-konformen Browser gesetzt werden:


voice-family:inherit;
width:240px;
}


Zum Schluss fügt Tantek noch einen Kind-Selektor ein. Dieser wird in Browsern gebraucht, die zwar das Anführungszeichen fälschlicherweise nicht entwerten, aber das Boxmodell korrekt beherrschen. Das reale Beispiel dafür ist Opera 5.


html>body #box {
width:200px;
}


Vorsicht mit dem Internet Explorer 6: Er entwertet das Anführungszeichen und verwendet die korrekte Breite mit 240 Pixeln. Das ist auch kein Problem, wenn er im CSS1-Compliant-Modus, also mit korrektem Doctype betrieben wird. Sollte er aber im Quirks-Modus sein, weil Sie keinen Doctype oder vor dem Doctype eine -Processing-Instruction verwenden, wird dort das Boxmodell nicht richtig angezeigt.

Theoretisch ist es natürlich auch denkbar, den Boxmodell-Hack auch für andere CSS-Probleme im Internet Explorer 5.x einzusetzen. Im Gegensatz zu konditionalen Kommentaren steckt der Boxmodell-Hack direkt im CSS. Bei konditionalen Kommentaren lassen sich dagegen nur externe CSS- oder style-Blöcke integrieren. Er gehört außerdem zu den halbwegs zukunftssicheren Hacks, da er sich auf einen Fehler in alten Browsern stützt, der wohl in neueren Browserversionen nicht wiederholt wird. Lange Zeit ließ sich das CSS mit dem CSS-Validator des W3C (jigsaw.w3.org/css-validator) nicht validieren. Mittlerweile klappt aber auch dies.

Die Angabe voice-family soll übrigens eigentlich bei gesprochenen Passagen angeben, welche Sprecherstimme verwendet wird (man, child et cetera). In den üblichen Browsern ist das nicht implementiert. Möchte man die Eigenschaft dagegen verwenden, kann man auch zu einem anderen CSS-Befehl greifen. Der einzige Nachteil ist, dass voice-family der einzige in keinem Browser genutzte Befehl mit beliebigem String-Wert ist. Das heißt, andere ungenutzte Befehle würden im CSS-Validator scheitern.

Hack 4.5: Der Kind-Selektor-Hack

Die Top 10 CSS-Hacks

Dieser Hack ist auch Teil von Tanteks Boxmodell-Hack und verhindert dort, dass der Opera 5 Probleme mit dem normalen Boxmodell-Hack bekommt. Deswegen hat er hier keine eigene Top-10-Nummer erhalten. Er schließt den Internet Explorer bis inklusive Version 6 und den Netscape Navigator 4.x komplett aus:


html>body #box {
width: 200px;
padding: 10px;
border: 10px solid red;
background-color: yellow;
color:red;
}


Der Hack macht sich nur zu Nutze, dass diese Browser keine Kind-Selektoren beschränken. Zum Hack wird das Ganze dadurch, dass Sie einen eigentlich unnötigen Kind-Selektor vor die ID packen.

Allerdings gilt hier erhöhte Vorsicht: Der Hack ist kein gutes Mittel gegen den Boxmodell-Bug und ähnliche Verfehlungen älterer Internet Explorer-Versionen, da er den Internet Explorer 6 einschließt. Zwar könnte man den Internet Explorer 6 im Quirks-Modus laufen lassen. Ein solcher Schritt hin zu einem weniger standardkonformen Browser, der dann mit Hacks gesundgedoktert wird, darf aber getrost als der falsche Ansatz bezeichnet werden.

Hack 5: Stern- und Tan-Hack

Die Top 10 CSS-Hacks

Der Stern ist in CSS 2 der Selektor für alle Elemente. Wenn er aber vor dem html-Tag-Selektor steht, ist er unsinnig, denn über diesem Tag gibt es keine anderen:


* html #box {
background-color:lightgrey;
}


Alle Browser außer dem Internet Explorer bis inklusive Version 6 erkennen das und ignorieren sämtliche Anweisungen in den geschweiften Klammern. Der Internet Explorer akzeptiert dagegen die Anweisung und setzt in diesem Fall die Hintergrundfarbe auf helles Grau.

Dieser Hack wird auch als Basis für eine Lösung des Boxmodell-Problems verwendet. Bekannt ist diese Variante auch unter Tan-Hack (Kurzform von Tantek) oder Modified Simplified Box Model Hack, da es sich hierbei um denselben Einsatzzweck handelt wie beim klassischen, und etwas komplexeren Boxmodell-Hack. Man sieht hier, dass die meisten Hacks eine lange Geschichte haben, die durch viel Ausprobieren und Diskussionen geprägt ist.

Der Tan-Hack besteht aus zwei Teilen: Der erste ist der Stern-HTML-Hack, der zweite ein Backslash in der Eigenschaft. Der Stern-HTML-Hack filtert auf alle Internet-Explorer-Versionen. Für den Boxmodell-Bug soll aber der Internet Explorer 6 nicht mit der geänderten Breite konfrontiert werden.

Deswegen gibt es noch eine zweite Breitenangabe für den Internet Explorer 6, die noch einen Backslash im Eigenschaftennamen erhält. Damit ist der Befehl für den Internet Explorer vor Version 6 nicht mehr sichtbar. Vorsicht: Der Backslash darf nicht bei den Buchstaben a bis f folgen, da diese sonst hexadezimale Zeichen bilden würden.


#box {
width: 200px;
padding: 10px;
border: 10px solid red;
background-color: yellow;
color:red;
}
* html #box {
width: 240px;
w\idth: 200px;
}


Die größte Schwäche dieses Hacks liegt darin, dass man die Breite dreimal angeben muss. Dafür validiert er sauber auch im W3C-Validator und sieht etwas weniger kryptisch aus als das Tantek-Original.

Hack 6: Attribut-Selektor

Die Top 10 CSS-Hacks

Attribute, darunter vor allem das id-Attribut, wurden schon immer als Hack verwendet. Der Netscape Navigator 4.x versteht beispielsweise IDs nicht, wenn sie direkt einem bestimmten Tag zugeordnet sind:


div#box {
font-size:1.2em;
color: red;
}


Das ist neben der Angabe einer bestimmten @media-Direktive und den bei der Hack 1 erwähnten Möglichkeiten, eigene Netscape 4.x-CSS-Varianten zu laden, eine der praktischsten Alternativen für den alten Kämpen.

In etwas modernerer Variante sind die Attribut-Selektoren auch anders verwendbar. Und zwar gibt es (echte) Attributselektoren, die auf ein HTML-Attribut zugreifen. Möglich ist es damit zum Beispiel, auf das id-Attribut zuzugreifen:


div[id] {
font-size:1.2em;
color: red;
}


Das geht wiederum nicht im Internet Explorer bis Version 6 und im Netscape Navigator 4.x. Wenn Sie diese Zugriffsart nun mit dem exakten Zugriff auf eine bestimmte ID verbinden, erhalten Sie einen normalen ID-Zugriff:


div[id="box"] {
font-size:1.2em;
color: red;
}


Im Gegensatz zur allgemeinen Variante wird nur der Opera 6 zusätzlich ausgeschlossen, da er in dieser Version nur einfache Attributtests ohne Wertzuweisung kennt.

Hack 7: !important

Die Top 10 CSS-Hacks

!important bezeichnet normalerweise einen CSS-Befehl mit dem Attribut »besonders wichtig«. Dieser CSS-Befehl wird dann gegenüber nutzerdefinierten Stylesheets und allen anderen gleich lautenden CSS-Befehlen vorgezogen. Der Normalfall wäre in den folgenden Zeilen also, dass die div-Elemente immer in Rot erscheinen, da !important die Präferenz des ersten Befehls so erhöht, dass der zweite keine Rolle spielt:


div {
color:red !important;
color:blue;
}


Im Internet Explorer bis Version 6 ist dieses Verhalten allerdings nicht korrekt implementiert. !important wird zwar gegenüber Nutzer-Stylesheets verwendet, aber die Präferenzreihenfolge bleibt dennoch erhalten, so dass hier die Vordergrundfarbe Blau ist.

Der Nachteil an diesem Hack ist, dass damit eher unabsichtlich Nutzer-Stylesheets überstimmt werden, die nicht selbst mit !important arbeiten. Das ist zwar für den Webdesigner meistens gut zu verkraften, da er ja bestimmen möchte, wie die Seite aussieht, gleichzeitig ist es aber ein größerer und eigentlich unnötiger Eingriff in die Freiheit des Nutzers.

Hack 8: Unterstrich-Hack

Die Top 10 CSS-Hacks

Der Unterstrich-Hack verwendet ein ungewöhnliches Verhalten im Internet Explorer bis Version 6: Dort werden Unterstriche vor den CSS-Befehlsnamen toleriert und der CSS-Befehl trotzdem richtig erkannt.

Die folgenden Zeilen liefern etwa für den Internet Explorer eine blaue Vordergrundfarbe und für den Rest inklusive Internet Explorer 7 eine rote Farbe im Vordergrund:


div {
color: red;
_color: blue;
}


Der Unterstrich-Hack hat gegenüber anderen Hacks eine Schwäche: Er validiert nicht. Zwar sind auch andere Hacks grenzwertig, aber der Unterstrich-Hack versagt auf jeden Fall. Und für Netscape Navigator 4.x führt der Unterstrich dazu, dass alle CSS-Befehle im selben Selektor scheitern.

Ein ähnlicher Hack wie der Unterstrich-Hack ist ein Komma-Selektor nach einer Stilangabe:


div, {
color: blue;
}


Auch diese Variante funktioniert im Internet Explorer bis inklusive Version 6. Validieren kann das CSS aber nicht mehr. Will man solche Ansätze verwenden, bietet es sich an, die Internet-Explorer-Anweisungen in ein eigenes CSS zu packen und das Haupt-CSS separat zu validieren.

Hack 9: expression()

Die Top 10 CSS-Hacks

Ein großes Problem ist, dass min-width und max-width im Internet Explorer nicht implementiert sind. Stattdessen wird die width-Angabe wie eine Minimalangabe behandelt. Um dieses Problem kümmern sich einige der vorherigen Hacks, die für den Internet Explorer filtern. Allerdings gibt es auch einen Hack mit ein wenig Javascript für den Internet Explorer:


#box {
background-color: #CCCCCC;
padding: 10px;
min-width: 200px;
max-width: 600px;
width:expression(document.body.clientWidth 805? "800px" : "auto");
}


Der große Nachteil an dieser Lösung ist, dass der Internet Explorer bei expression() recht absturzempfindlich ist. Verwenden Sie beispielsweise den CSS1-Compliant-Modus, sprich einen XHTML-Doctype, erzeugt der obige Code einen Absturz. Im Quirks-Mode ohne Doctype klappt es dagegen hervorragend. Der Absturz selbst wird von der Angabe für die minimale Breite erzeugt. Um ihn zu verhindern, könnten Sie zusätzlich mit document.compatMode den Rendering-Modus abfragen und nur im Quirks-Mode die Größenanpassung erlauben.

expression() eignet sich auch für andere Internet-Explorer-Eigenheiten. Beispielsweise können Sie damit eine fixe Positionierung nachbilden, die eigentlich mit fixed erzeugt würde. fixed wird im Internet Explorer erst in Version 7 unterstützt. Hierzu benötigen Sie nur zwei div-Blöcke:

Der Inhalt wird hier absolut positioniert und erhält eine größere Höhe, um den Fixier-Effekt überhaupt sehen zu können:


#inhalt {
position: absolute;
left: 150px;
width: 400px;
height: 800px;
background-color: #999999;
}


Nun zur fix positionierten Box. Hier wird zunächst die position für alle anderen Browser außer dem Internet Explorer angegeben. Dann folgt in expression() die Angabe für die absolute Positionierung. Die Position von oben wird über die Auswertung der aktuellen Scrollposition plus des gewünschten Versatzes berechnet:


#box {
position: fixed;
top: 100px;
left: 0px;
width: 150px;
position: expression("absolute");
top: expression(parseInt(document.body.scrollTop + 100));
}


Auch diese Variante funktioniert nur im Quirks-Mode im Internet Explorer. Außerdem sorgt sie natürlich dafür, dass das CSS nicht mehr korrekt validiert.

Die Korrektur, die hier direkt in CSS vorgenommen wurde, kann alternativ auch über ein separates Javascript erfolgen, das sich regelmäßig selbst aufruft (setInterval()). Das fällt dann allerdings nicht mehr in die Kategorie CSS-Hack.

Hack 10: Browser-Filter

Die Top 10 CSS-Hacks

Angelehnt an den Boxmodell-Hack von Tantek Çelik haben er selbst und einige andere experimentierfreudige CSS-Enthusiasten an weiteren Hacks gebastelt. Einer davon basiert auf den häufig eingesetzten kommentierten Backslashes (siehe Hack 2), um den Internet Explorer 5.x für den Mac herauszufiltern. Dieser Hack kann umgedreht werden, um ein CSS speziell für den Mac-Internet-Explorer zu verwenden:


/*\*//*/
@import "ie5mac.css";
/**/


Der Anfang ist wieder ein mehrzeiliger Kommentar. Dann folgt der IE für Mac-Hack: \*/. Danach kommen aber nicht die Anweisungen, sondern in den Augen des IE für den Mac noch einmal ein schließender Kommentar.

Bekannt ist diese Variante auch unter dem Namen Internet Explorer für Mac-Filter. Ein Filter bezeichnet hier einen Hack, der die Stilbefehle nur ganz bestimmten Browsern zur Verfügung stellt. Allgemeiner ist der Highpass-Filter von Tantek. Hier werden alle Browser ausgeschlossen, die CSS 1 nicht korrekt unterstützen:


@import "null?\"\\{";
@import "highpass.css";


Entscheidend ist das in der ersten Zeile auskommentierte Anführungszeichen, das Netscape Navigator 4.x und Internet Explorer bis 4.4 verwirrt. Sie betrachten das Anführungszeichen als Ende des Dateinamens. Für den Internet Explorer 5.x für den Mac sollten Sie hier allerdings eine Datei null anlegen, die zumindest einen Kommentar enthält. Neben dem Highpass-Filter hat Tantek auch noch so genannte Midpass-Filter entwickelt, die nur bestimmte Browser herausfiltern.

Fazit

Die Top 10 CSS-Hacks

Setzen Sie Hacks nur ein, wenn es sein muss. Wenn es Hacks sein müssen, dann sollten Sie sich auf solche beschränken, die sich speziell an alte Browser wenden und bei denen keine Seiteneffekte in neueren Browsern zu erwarten sind. Und natürlich schadet es auch nicht, mit jedem neuen Browser die alten Arbeiten zu testen.

Alle Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.