WMP Webstandards

Eine Auswahl von CSS-Hacks

zurück zur Übersicht

CSS-Hacks sind spezielle Anweisungen, die entweder aufgrund mangelnder Unterstützung von Webstandards oder einfach wegen Bugs, nur von bestimmten Browsern interpretiert oder ignoriert werden. Oft kommen sie bei Korrekturen für den IE zum Einsatz, da er nur mangelhaft CSS2 unterstützt. Idealerweise sollten Hacks aber nicht verwendet werden, da einige nicht valide sind.

Nicht zu vergessen wäre der Gebrauch von Tabellen für Layoutzwecke: der größte CSS-Hack aller Zeiten! ;)

Nach oben

Übersicht

  1. Der Kind-Selektor
  2. !important
  3. Der Attribut-Selektor
  4. Der Stern-HTML-Hack
  5. Der Tan-Hack
  6. Hack für den IE5/Mac
  7. IE5/Mac Backslash Hack
  8. IE5/Mac Band Pass Filter
Nach oben

Der Kind-Selektor

Da der Kind-Selektor von keiner Version des Internet Explorers interpretiert wird und valide ist, eignet er sich hervorragend um Formatierungen vor dem IE zu verstecken.

So wird es gemacht:

html>body p.note {
  eigenschaft:wert;
}

So werden alle Absätze der Klasse "note" vor dem IE verborgen.

Nach oben

!important

!important ist genaugenommen kein Hack und wurde mit CSS1 geschaffen, um die Prioritäten der Formatierungen von Autoren- und Userstylesheets zu regeln. Autorenstylesheets sind die Formatierungen, die vom Webdesigner erstellt werden, während Userstylesheets vom Benutzer selbst für den Browser erstellt werden. Letztere sind sehr wichtig für die Zugänglichkeit von Webseiten, da sich zum Beispiel Leute mit Sehbehinderungen einen höheren Schriftgrad und Kontrast einstellen können. So sollen Angaben, die mit !important versehen werden, gleiche Autorenformatierungen übertrumpfen. Jedoch wird dies vom IE nicht richtig interpretiert, was die Grundlage für eine Art IE-Hack ist.

So funktioniert es: Es werden zwei Formatierungen mit denselben Selektoren notiert. Die erste mit den Standardwerten wird hinter dem Wert mit !important versehen. Die zweite Angabe mit den Werten für den IE muss dahinter normal notiert werden, damit es funktioniert. Der IE ignoriert den ersten Wert mit der !important-Angabe und übernimmt den zweiten. Alle anderen modernen Browser orientieren sich am erten Wert, da er Priorität hat.

p.note
{
  eigenschaft:wert !important;
  eigenschaft:wert; /* nur für den IE */
} Nach oben

Der Attribut-Selektor

Die Angabe eines Attributs in eckigen Klammern für ein HTML-Element ist valide, wird jedoch von IE nicht interpretiert. So wurden zum Beispiel auch die Formatierungen der Code-Boxen-Titel auf diesen Seiten vorgenommen. IE Benutzer sehen die Codeboxen ohne oberen Rahmen, den Titel nur bei Hover eingeblendet.

ein Beispiel

code[title]
{
eigenschaft:wert;
}

So werden alle Code-Elemente mit title-Attribut formatiert.

Nach oben

Der Stern-HTML-Hack

Der Stern-HTML-Hack besteht aus einem Universalselektor (*) gefolgt von einem html-Selektor. Die Kombination dieser beiden Selektoren ist zwar unsinnig, da das HTML-Element kein Mutterelement besitzen kann, aber valide. Das besondere daran ist, dass es vom IE interpretiert wird und von allen andern Browsern nicht.

So sieht es aus:

p.note
{
font-style:normal;
}
* html p.note
{
font-style:italic;
}

User des IE bekommen alle Absätze der Klasse "note" kursiv dargestellt und alle andere sehen den Text normal.

Nach oben

Der Tan-Boxmodell-Hack

Der Tan Hack, auch Modified Simplified Box Model Hack genannt, kann gut als Erweiterung des Stern-HTML-Hacks genutzt werden. Er ermöglicht es, Eigenschaften speziell für den Internet Explorer ab Version 6 zu setzen.

Zu diesem Zweck werden Escape Sequenzen genutzt, die alte Internet Explorer Versionen noch nicht richtig interpretieren konnte.

Es wird einfach ein Buchstabe im Eigenschaftsnamen mit einem "\" versehen.

Beispiel:

p.note
{
font-style: normal;  /* Andere Browser */
}
* html p.note
{
font-style: italic;  /* Internet Explorer < 6 */
f\ont-style: oblique;  /* Internet Explorer >= 6 */
} Nach oben

Hack für den IE5/Mac

Wer Anweisungen speziell für den IE5/Mac vornehmen möchte kann sich dieses Hacks bedienen:

*>html selektor
{
eigenschaft:wert;
}

Damit der Hack auch funktioniert, sollte man darauf achten, dass man kein Leerzeichen zwischen dem universellen Selektor (*) und dem Kind-Selektor (>) lässt.

Hier gibt es eine Übersichtskarte aller Hacks, die so im Umlauf sind.

Nach oben

IE5/Mac Backslash Hack

Mit diesem Hack kann man Angaben vor dem IE5/Mac verstecken.

/*\*/
eigenschaft: wert;
/**/

Interpretation des IE5/Mac

  1. /* öffnet den ersten Kommentar
  2. \* der Backslash escaped das *
  3. */ eigenschaft: wert; /* Kommentarinhalt
  4. */ schliesst den ersten Kommentar

Alle anderen Browser

  1. /* öffnet den ersten Kommentar
  2. \ Kommentarinhalt
  3. */ schliesst den ersten Kommentar
  4. eigenschaft: wert; Kommentarinhalt
  5. /**/ öffnet und schliesst den zweiten Kommentar
Nach oben

IE5/Mac Band Pass Filter

Um CSS Angaben nur für den IE5/Mac sichtbar zu machen, kann man folgenden Code verwenden:

/*\*//*/
eigenschaft: wert;
/**/

Interpretation des IE5/Mac

  1. /* öffnet den ersten Kommentar
  2. \ Backslash Hack
  3. *// Kommentarinhalt
  4. */ schliesst den ersten Kommentar
  5. eigenschaft: wert; interpretierte Angaben
  6. /**/ öffnet und schliesst den zweiten Kommentar

Alle anderen Browser

  1. /* öffnet den ersten Kommentar
  2. \ Kommentarinhalt
  3. */ schliesst den ersten Kommentar
  4. /* öffnet den zweiten Kommentar
  5. / eigenschaft: wert; /* Kommentarinhalt
  6. */ schliesst den zweiten Kommentar

Kommentare







12.04.2005 Löschen

fphilipe

Einen weiteren Hack für den IE5/Mac:
/* IE5/Mac Hack \*/
eigenschaft:wert;
/* Ende */
Der IE escaped das '*' Zeichen nicht und somit wird der Kommentar nur im IE/Mac geschlossen. Bei anderen Browsern wird er erst beim letzten '*/' geschlossen.

12.04.2005 Löschen

Twisting

@fphilipe: mach ihn doch noch schnell dazu :)

12.04.2005 Löschen

fphilipe

Oops, läuft ein bisschen anders. Ich schreibs mal rein.

19.04.2005 Löschen

m3cki

Sehr schöne Übersicht.

03.05.2005 Löschen

armin

schöne Übersicht - leider läst sich im Firefox nur die erste Seite ausdrucken - hatte diesen Fall bei einer meiner Seiten auch schon mal - und habe es auf ziemlich undurchsichtige Weise wieder wegbekommen. Gruß, Armin

07.05.2005 Löschen

Twisting

@armin: Ich habe jetzt ein Druckstylesheet erstellt. Du dürftest es jetzt problemlos ausdrucken können.

17.05.2005 Löschen

kosmar

@fphilipe
das ist der oben beschriebene backslash hack standards.webmasterpro.de
du hast eben nur noch kommentiert zwischen den sterne .... deshalb sieht es erstmal anders aus.

18.05.2005 Löschen

fphilipe

Ich weiss, ich habe ihn ja in den aritkel reingeschrieben ;)

23.08.2005 Löschen

he-la

M.E. hat sich im Beispiel des Star-HTML-Hack ein Fehler eingeschlichen:
Zunächst sollte der Selektor p.note {font-style:normal;} notiert werden um in der nächsten Zeile für den IE dann mit * html p.note {font-style:italic;} überschrieben zu werden.
Das gleiche gilt für das Beispiel im nachfolgenden Tan-Hack.

23.08.2005 Löschen

twisting

@he-la: Ich habe es korrigiert, danke.

08.02.2006 Löschen

peter

danke für diese wunderbare übersicht...
du hast mir soeben meinen schlaf gerettet...
nach 10 stunden recherche hab ichs nun endlich begriffen, wie diese hacks funktionieren

22.09.2006 Löschen

Volker

Ein großes Lob an diese fantistische Übersicht.

15.05.2007 Löschen

Manu

Ich würde noch gerne den IE 7 Hack hinzufügen, der im Grunde wie der der Stern-HTML-Hack funktioniert, außer das man ihm noch ein Plus zwischen Stern und HTML zuweist.
So sieht es dann bei dem aus: *+html

21.08.2007 Löschen

p@n1k

Hallo, erstmal vielen Dank für die tolle Liste. Eine Ergänzung zum !important 'Hack': IE7 wertet diesen Tag nun auch aus. Ist also kein Trick mehr um Dinge vor IE allgemein zu verstecken :(

24.08.2007 Löschen

zap

danke für die seite!

27.09.2007 Löschen

Mark

Hi!
Eine tolle Auflistung. Ich würde aber noch anregen, die Liste um Conditional Comments zu erweitern. Ich arbeite recht viel mit CSS Hacks bzw. muss viel für diverse Browser anpassen und vor allem bei großen Seiten hat es sich bewährt dem IE per Conditional Comment ein eigenes Stylesheet unterzujubeln. Meiner Meinung nach eine recht saubere und lesbare Lösung. Lg,
Mark

12.11.2007 Löschen

Tobias

Hallo! Du kannst auch noch den Stern-Plus Hack einfügen für IE7:
*:first-child+html
lg, Tobias

01.07.2008 Löschen

Thomas

Beim IE5/Mac Backslash Hack muss es natürlich bei "Alle anderen Browser" unter 4. heißen:
"eigenschaft: wert; interpretierte Angaben"
und nicht
"eigenschaft: wert; Kommentarinhalt" :)

08.04.2009 Löschen

initiant

Eine Frage: Wie kriegt man folgende Anweisung für den IE entfernt, oder überschreiben?
max-height
Ich habe schon alles versucht, aber IE kennt diese Anweisung nun mal nicht.

23.12.2009 Löschen

marcusd

Dann musste den Wert doch eigentlich auch nicht überschreiben oder entfernen, oder?
Aber es gibt ne Lösung das ebenfalls für den IE umzusetzen: setz nen Hack für den IE ein und setze dort die height auf den entsprechenden Wert. Damit erreichst dann auch eine Mindesthöhe im IE!

Von paul. Letzte Änderung am 29.08.2005