Mit CSS Hacks können auf einfache und schnelle Weise die unterschiedlichen Browser einzeln angesprochen werden. So bewirkt zum Beispiel ein CSS Hack für den IE6, dass nur im Browser Internet Explorer Version 6 eine andere Darstellung erreicht wird, als in allen anderen Internet Browsern. Gerader der IE6 und der IE7 stellen bei der CSS Programmierung hin und wieder Probleme dar, da sie einiges etwas anders interpretieren, manche CSS Eigenschaften nicht kennen oder auch unsichtbare Ränder hinzufügen. So greift man beim Webdesign ganz einfach auf die entsprechenden CSS Hacks für den IE6, IE7 oder auch IE8 zurück und stellt damit eine saubere Darstellung auch in diesen Internet Browsern sicher.
Natürlich ist es auch möglich mit extra CSS Dateien jeweils die unterschiedlichen Internet Browser anzusprechen. Diese dann mit den so genannten Conditional Comments in den head Bereich einfügen oder auch dort direkt mit eigenen CSS Programmierungen als Conditional Comments zu arbeiten. Aber warum in die Ferne schweifen, wenn der einfache Weg so nah liegt. Der zweite Weg schreibt unnötig viel in den head Bereich und der erste Weg arbeitet mit mehreren CSS Dateien. Aus SEO und Suchmaschinen Sicht zwei Lösungswege, die nicht wirklich optimal sind.
CSS Hacks werden dagegen einfach nur als zusätzliche Zeilen in die bestehende CSS Datei geschrieben. Einfach, schnell, sauber und vor allem aufgeräumt. Ich persönlich schreibe die CSS Hacks direkt unter die jeweiligen CSS Anweisungen, so dass ich bei den einzelnen CSS Bereichen auch gleich im Überblick sehe, für welchen Bereich CSS Hacks notwendig sind. Werden diese Bereiche im Nachhinein geändert, fallen auch gleich die zugehörigen CSS Hacks auf, so dass ich auch diese entsprechend mit anpassen kann, wenn es notwendig ist.
CSS Hacks für den IE6
Der Internet Explorer 6 – IE6 – wird mit dem so genannten Star-HTML-Hack separat angesprochen. Alle diese CSS Hacks haben alleinig nur auf den IE6 Auswirkung und werden von allen anderen Internet Browsern ignoriert:
* html div { … } Nachfolgend ein Beispiel für einen CSS Hack für den IE6, mit dem die Breite der Klasse “bereich” anders definiert wird, als für alle anderen Browser. Als erstes kommt die Klasse “bereich” mit der Breite 500 Pixel für alle Browser und danach der CSS Hack für den IE6 mit der Breite 250 Pixel:
.bereich { width: 500px; }
* html .bereich { width: 250px; }Mit CSS Hacks werden genau nur diejenigen Dinge angesprochen, die anders dargestellt werden sollen. Hätte die Klasse “bereich” im obigen Beispiel noch weitere Formatierungen (Höhe von 20 Pixel und die fette Schrittdarstellung), dann müssen diese im CSS Hack nicht noch einmal genannt werden, sofern sie gleich bleiben. So wird folgender CSS Hack im IE6 nur die Breite der Klasse “bereich” ändern, die Höhe und die Schriftdarstellung bleiben wie für alle Browser definiert gleich:
.bereich { width: 500px; height: 20px; font-weight: bold; }
* html .bereich { width: 250px; }Nach meinen Erfahrungen fügt der IE6 gerne unsichtbare Ränder von 10 bis 15 Pixel Größe hinzu, so dass gerade IE6 CSS Hacks bezüglich der Breite zu meinen meist verwendeten CSS Hacks für den IE6 gehören. Weiter kennt der IE6 Eigenschaften wie zum Beispiel min-width oder min-height nicht, für die entsprechende Workarounds mit CSS Hacks gefunden werden müssen.
CSS Hacks für den IE7
Für die korrekte Darstellungsweise im Internet Explorer 7 – IE7 – sind wesentlich seltener CSS Hacks notwendig als für den IE6. Dennoch kommt es hin und wieder vor, dass der IE7 einiges anders darstellt, als andere Internet Browser und dafür kommen dann die IE7 CSS Hacks zum Einsatz:
* + html div { … } Zu Beachten ist vor allem, dass CSS Hacks für mehrere Browser, also zum Beispiel für den IE6 und den IE7 nicht in einen CSS Hack geschrieben werden dürfen, sondern dafür mehrere CSS Hacks notwendig sind!
Möchte ich z.B. der ID “seite” im IE7 sowie auch im IE6 andere Ränder zuweisen als allen anderen Browsern, so sieht das wie folgt aus:
#seite { margin: 2px 4px 6px 8px; }
* + html #seite { margin: 8px 6px 4px 2px; }
* html #seite { margin: 8px 6px 4px 2px; }CSS Hacks für den IE8
Der Vollständigkeit halber möchte ich noch die CSS Hacks für den IE8 anfügen, wobei ich selbst sie bis dato noch nicht gebraucht habe, da der IE8 doch sehr konforme Darstellungen liefert. Sollte es dennoch nötig werden, CSS Hacks für den IE8 einzufügen, stellt sich das Problem, dass es keine regulären CSS Hacks für den IE8 gibt. Die einzig mir bekannte Möglichkeit ist via einem Meta Tag den Internet Explorer 8 zurückzusetzen auf die Darstellung des IE7:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>Mit diesem Meta Tag im Head Bereich verhält sich der IE8 wie der IE7 und alle für den IE7 verwendeten CSS Hacks werden im IE8 berücksichtigt.
Weitere interessante Infos über CSS Hacks gibt es auf der CSS Hacks Seite, die mir schon öfter als Anleitung für meine diversen CSS Hacks gedient hat. Zumindest so lange, bis mir die oft notwendigen CSS Hacks für den IE6 und den IE7 “ins Blut übergegangen” sind.