Umgang mit IE-Hacks und anderen CSS-Dateien | 24. März 2007 um 20:55 Uhr / Webdesign

Eingestellt am 24. März 2007 um 20:55 Uhr » Webdesign

Über die Jahre habe ich eine Methode entwickelt wie ich mit CSS-Hacks für den IE umgehe. Ich denke dass sie mittlerweile so verfeinert ist, dass ich mich traue sie nun öffentlich vorzustellen. Es kann natürlich sein, dass der eine oder andere es genau so macht, oder vielleicht sogar noch besser, aber ich habe oft gesehen dass Kollegen eben damit sehr große Probleme haben.

Ich habe grundsätzlich immer 100% des CSS in externen Dateien und nutze nie Inlinestyle. Auch wenn es sowieso nur ganz sicher auf einer einzelnen Seite vorkommen wird, kommt bei mir alles in die externe CSS Datei. (Meist stellt sich nach einem halben Jahr heraus, dass man das doch noch ein zweites oder drittes mal gebrauchen könnte).

Druckstylesheet

Als erstes binde ich meine print.css ein. Es hat sich irgendwann herausgestellt, dass der IE manchmal die screen.css und print.css beim ausdrucken vermischt, wenn man die print.css nach der screen.css eingebunden hat. Deshalb mache ich das seit damals pauschal in dieser Reihenfolge und hatte seit dem diese Probleme nicht mehr. Ich binde all meine CSS-Dateien mit Hilfe des <link>-Tags ein.

<link rel="stylesheet" href="/css/print.css"  type="text/css" media="print" />

Stylesheet für den Bildschirm

Ich binde als zweites meine screen.css ein. Dabei gebe ich als media zwei Sachen ein, screen und projection. Damit stelle ich sicher dass der Netscape 4.x gar kein CSS bekommt und die Inhalte so für die User sicher zugänglich sind, wenn auch nicht schön formatiert.

<link rel="stylesheet" href="/css/western/screen.css" type="text/css" media="screen, projection" />

Zusätzliches Stylesheet für den IE

Der Internet Exploerer braucht als einziger zusätzliche Angaben, die die anderen Browser verwirren würden. Ich binde für diesen Browser also eine zusätzliche CSS Datei ein, die ie.css.

Sie wird innerhalb eines Conditional Comments auch mit Hilfe des <link>-Tags eingebunden:

<!--[if IE]><link rel="stylesheet" href="/css/ie.css" type="text/css" /><![endif]-->

Wie man sieht binde ich das ohne die media Angabe ein, denn alle bisherigen IEs haben das Problem dass sie die media-Angaben innerhalb eines CCs leider sowieso nicht interpretieren wie ich gerade las. Hm, das könnte auch das komische Verhalten mit dem Drucklayout erklären, was ich weiter oben anmerkte.

CSS-Filter für die ie.css

Natürlich könnte ich für jede IE Version mit Hilfe von CCs eine extra CSS Datei einbinden. Wenn aber wieder eine neue Version herauskommt müsste ich wieder alle HTML Dateien ändern um diese hinzuzufügen. Deshalb bin ich zu der Überzeugung gekommen dass es viel praktischer ist nur eine einzelne CSS-Datei mit allen IE-Hacks zu haben und innerhalb dieser mit CSS-Filtern für die jeweiligen Versionen zu arbeiten.

Seit eh und je hilft mir bei der wahl des richtigen Filters für den IE die Seite CSS für alle Browser von Kristof Lipfert. Hier eine kleine Auswahl:

/* -- alle IE (incl. 7) -- */
#nav li { height: 1%; }

/* -- IE7 -- */
h2 { *margin-top: -5px; }

/* -- IE <= 6 -- */
* html h1 { margin: 0 150px 50px -30px; }
* html img.alpha { behavior: url("/css/pngbehavior.htc"); }

/* -- IE 5.5 -- */
html. * .spalte { width: 28%; }

/* -- IE 5.0 -- */
html + body a.extlink { background: none; }

/* -- IE <= 5.5 -- */
* html  .beispiel { content:"\"; overflow: auto; }

So kann ich meine eigentliche screen.css komplett von Hacks freihalten und sie sogar validieren (wenn ich nicht gerade opacity nutzen möchte). Auch der HTML-Code bleibt sauber und muss bei einer neuen IE-Version nicht verändert werden.

Nutzt ihr ähnliche Strategien, oder komplett andere? Was würdet ihr daran noch verbessern?

Kommentare

Die Kommentare sind für diesen Eintrag geschlossen.