Diese Methode überzeugt. Statt dass man mit Conditional Comments zusätzliche komplettte CSS-Dateien für den IE einbindet, vergibt man je nach IE-Version eine eigene Body-ID. Dann kann man alle Korrekturen in seinen Hauptstylesheet schreiben und spart sich das Gewurste mit Dateien wie ie6.css, ie7.css und wie sie alle heißen mögen. Außerdem entfallen an dieser Stelle beim Seitenaufruf mit dem Internet Explorer gleich ein paar Requests. Eine rundum feine Technik.
Nie wieder eigene CSS-Dateien für den Internet Explorer
Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.
Kommentare (18)
Aaron ¶
15. Dezember 2008, 10:34 Uhr
Hmmm...das macht zwar einiges einfacher, allerdings finde ich daran etwas nicht so toll: User, welche einen "netten" Browser verwenden, laden dann die Korrekturen im CSS-File auch, d.h. haben eine grössere Datei zu laden...
Peter ¶
15. Dezember 2008, 10:40 Uhr
Ach, die paar Zeilen … außerdem ist die Datei nach dem ersten Aufruf sowieso im Browser-Cache.
Nikolaus ¶
15. Dezember 2008, 10:48 Uhr
Man könnte ja beide Methoden auch verbinden: Eine CSS-Datei für ALLE IEs, die per Conditional Comments eingebunden wird und die selber wieder auf die Conditional Classnames verweist...
Insgesamt sehe ich aber keinen Vorteil: Ob ich mich jetzt damit aufhalte, die richtige CSS-Datei zu finden oder in einer riesigen CSS-Datei ewig nach der richtigen Stelle suche, macht doch keinen großen Unterschied.
Peter ¶
15. Dezember 2008, 10:56 Uhr
Ihr übertreibt wirklich. Wie viele Extra-Zeilen sind das? So 15 bis 30? Mehr ja im Normalfall nicht. Die machen doch, sofern man sie einigermaßen klug organisiert (z.B. alle ans Ende setzt), einem doch das Leben nicht schwer.
Andi ¶
15. Dezember 2008, 11:01 Uhr
Mich überzeugt diese Variante auch nicht. Unter anderem aus dem Grund, dass ich auch meine CSS-Datei(en) valide halten will (was mit manchen ie-Hacks schlicht nicht möglich ist).
Damit das Ganze trotzdem nicht ausartet und schön übersichtlich bleibt, arbeite ich mit einer CSS-Datei per CC. In dieser CSS-Datei werden die unterschiedlichen ie-Versionen per Hack bedient.
So ist Gut und Böse getrennt, wie es sich gehört ;)
Karsten ¶
15. Dezember 2008, 11:02 Uhr
Das einfachere Handling ist auf jeden Fall das entscheidende Argument für diese Methode. Aber die geringere Anzahl an Requests jetzt als so positiv darzustellen, halte ich für etwas übertrieben. Wie Aaron schon schreibt, erhöht sich dadurch die Datenmenge die von "netten" Browsern geladen werden muss. Was hier vorteilhafter ist, müsste man - wenn man es als Argument anführen möchte - tatsächlich messen, ansonsten ist es einfach nur eine Behauptung.
Grundsätzlich aber eine interessante Alternative.
muhli ¶
15. Dezember 2008, 11:08 Uhr
Naja, je nach Umfang der Website sind das doch schnell mal ein paar Zeilen mehr für den IE. Da lohnt sich die Trennung durchaus =) Die Methode ist an sich wirklich nicht schlecht, allerdings reicht für alles IEs eine einzige per CC einzubindende Datei. Der IE 6 lässt sich einfach per *-html-Hack ansprechen, der IE > 6 ganz normal.
Den einen HTTP-Request mehr für alle IE-Nutzer finde ich durchaus vertretbar, wenn für mich als Entwickler die IE-Hacks vom Rest der Stylesheets sauber getrennt bleiben.
Peter ¶
15. Dezember 2008, 11:27 Uhr
Zitat Andi:
CSS-Dateien mit kriminellen Hacks sind doch nicht valide, nur weil sie der W3C-Validator wegen der Conditional Comments nicht bemerkt. Die sind schließlich immer noch da und werden verwendet. Ist es wirklich besser bzw. macht es einen Unterschied, ob mal alle invaliden Hacks auf zig Dateien verteilt oder ob man sie alle in einer hat?
Zitat muhli:
Dass das bei vielen Projekten der Fall ist, ist durchaus möglich. Warum das aber eigentlich nie mehr als ein paar Zeilen sein sollten, dazu kommt bald auch noch ein Artikel von mir :)
Daniel Harrington ¶
15. Dezember 2008, 12:19 Uhr
Aus meiner Sicht geht es weniger darum, alles einfach zu halten, sondern seine Dateien sauber zu haben. IE-Hacks gehören schlicht nicht zwischen die normalen Styles.
Andi ¶
15. Dezember 2008, 12:31 Uhr
Zitat Peter:
Klar, nur habe ich eine saubere, valide CSS-Datei für die standardkonformen Browser und eine CSS-Datei, welche nicht validiert. Eine CSS-Datei für alle IEs vereinfacht die Wartung meiner Meinung nach und macht den Unterschied.
Zitat Daniel Harrington:
Meine Meingung.
ChrisB ¶
15. Dezember 2008, 19:08 Uhr
Zitat Andi:
Die unterschiedlichen IE-Versionen werden ueber Klassen selektiert - da brauchst du, um dem IE abweichende, aber gueltige CSS-Deklarationen vorzusetzen, keine ggf. invaliden CSS-Selektor-Hacks mehr.
Und zum Thema Validitaet kontra nicht-valides einfach "verstecken" hat sich Peter ja schon geaeussert.
Und darueber, ob man die zusaetzlichen/abweichenden Formatierungen fuer den IE gesammelt an einer Stelle haben will, oder dort, wo auch die normalen Formatierungen fuer ein Element/einen Selektor stehen, gehen die Meinungen ja auch auseinander.
Ich halte es auch fuer uebersichtlicher, wenn ich "normal" und "ie-speziell" an einem Ort zusammen vorliegen habe.
Peter ¶
15. Dezember 2008, 19:15 Uhr
Zitat Daniel Harrington:
Das war auch erst meine Meinung, als ich von dieser Methode las. Es fühlt sich im ersten Moment eben falsch an und ist anders, als man es vielleicht gewohnt ist. Aber dann hab ich nicht wirklich einen handfesten Grund für diese Einstellung finden können und sie entsprechend über Bord befördert.
kingduevel ¶
15. Dezember 2008, 19:19 Uhr
Schon wieder ein Thema, wo sich Peter wohl andere Kommentare erwünscht hat und die Leser nicht seiner Meinung sind. Du solltest dir Gedanken machen ;) !
Christian Vogt ¶
15. Dezember 2008, 20:19 Uhr
Zitat ChrisB:
Jo, dann hau mal in deine Selektoren im all-umfassendem Stylesheet ein zoom: 1; hinein, da wird dir der Validator schon sagen ob das richtig oder falsch ist.
Ich für meinen Teil finde die Trennung in mehrere CSS-Dateien auch den besseren Weg, und der eine Request da... meinst du wirklich der interessiert einen IE-Nutzer?
Einziger Vorteil den ich hier sehe ist, das man bei Bugs die sowohl IE6 als auch 7 betreffen, beide Selektoren zusammenfassen kann.
Ansonsten sehen diese massenhaften body-Elemente für mich auch irgendwie nicht sauber aus, man stelle sich vor man würde Serverseitig noch eine Klasse übergeben wollen... das wird ja schauderhaft.
Peter ¶
16. Dezember 2008, 09:40 Uhr
Zitat Christian Vogt:
Aber wenn es in einem per Conditional Comments eingebundenen IE-Stylesheet steht, ist es doch genau so falsch. Wo ist der Unterschied?
Wenn, wenn nicht ihn? Immerhin ist sein Browser der langsamste, der kann jede Hilfe gebrauchen.
Also ist es ok, massenhaft proprietären Microsoft-Krempel im Head abzuladen, aber es nicht ok, das gleiche im Body zu machen? Das musst du mir erklären.
Finn ¶
16. Dezember 2008, 10:40 Uhr
über diese methode bin ich vor zwei jahren auch schonmal gestolpert. die auswirkungen auf die spezifität haben mich allerdings ebenfalls davon abgehalten, sie jemals produktiv zu nutzen. von "rundum fein" kann leider nicht die rede sein :/
ChrisB ¶
16. Dezember 2008, 20:28 Uhr
Zitat Christian Vogt:
Und wenn er es dir nicht sagt, weil du "falsches" CSS vor ihm versteckst, fuehlst du dich besser?
Zitat Finn:
Welche Probleme bzgl. Spezifitaet siehst du denn dabei genau?
Du hast eine Klasse, auf so ziemlich "oberster Ebene", die du den meisten Selektoren einfach voranstellen kannst.
Webagentur ¶
24. Juli 2009, 05:51 Uhr
Danke ... diese Methode kannte ich noch gar nicht ... werde ich gleich mal ausprobieren.