Für die unterschiedlichen IE Versionen nutze ich Conditional Comments. Die Hacks finde ich einfach zu umständlich. Und da bei meinen Seiten meist ein CMS zum Einsatz kommt, muss ein evtl. neues Stylesheet auch nicht in diversen HTML-Dateien, sondern nur im zentralen Template eingefügt werden.
Wie machst du es dann mit Anpassungen, die für alle IE-Browser gelten, kopierst du diese in alle vier ie_x.css Dateien? Das finde wiederum ich sehr umständlich weil man nicht auf einen Blick sieht in welcher Datei man was ändern muss.
Du weißt auch dass jede zusätzliche Datei einen extra aufruf im Server bedeutet, auch wenn sie im Cache liegen (weil nachgefragt werden muss ob sich etwas verändert hat). Das kann bei größeren Seiten durchaus problematisch werden.
Vorab sei erwähnt, dass ich alle Hacks für IE stets direkt da notier, wo auch alle weiteren Eigenschaften eines Elementes im Standardstylesheet stehen. So habe ich alle Eigenschaften sofort im Blick, welche sich Browserübergreifend auf das jeweilige HTML-Element auswirken. Jeder Hack wird von mir bewusst eingesetzt – auch nur wenn nötig versteht sich von selbst – so dass das Stylesheet im ersten Augenblick nicht valide erscheinen mag. Erstens kann ich hierdurch auf einen CC im HTML-Code verzichten und zweitens hilft es mir unheimlich die Übersicht zu behalten. Im Gegensatz dazu, wenn ich erst beim bearbeiten der Eigenschaften eines Elementes noch andere Stylesheets überblicken müsste, welche noch Sachen enthalten, die wiederum Eigenschaften (für spezielle Browserversionen) überschreiben könnten.
Ich verwende jeweils ein Stylesheet für Screen sowie Projection und eines für Print. Diese beiden importieren via »Escaped Comment-End« und @import-Rule weitere Stylesheets.
Die da wären (Basis):
- layout.css
- content.css
- … bei größeren Projekten, gern auch weiteres Splitting wie etwa eine form.css usw. So bekommt auch ein Nutzer mit IE 5.x auf dem Mac plain-HTML serviert.
Nicht wie im Stylesheet für den Bildschirm, werden im Printstyle jedoch neben dem Import der content.css auch allgemein gültige Eigenschaften notiert. Undezware um die für die Druckversion nicht benötigten Sachen via display: none; auszublenden. Das darf auch der IE 5.x auf dem Mac auslesen und verstehen.
Jetzt geht es aber erst richtig los. In die layout.css packe ich alles – wie der Name schon verrät – was mit dem Layout (Maße und Position der einzelnen Bereiche einer Seite) im entferntesten Sinne zu tun hat.
Die content.css enthält die Eigenschaften aller Inhaltselemente. Also jene Eigenschaften, die zur Formatierung aller HTML-Elemente nötig sind, womit Inhalte HTML-technisch ausgezeichnet werden, wie etwa table, ul, ol, p, h… und so auch für die Printversion von Interesse sind.
Die content.css wird durch die screen.css als auch die print.css importiert und verarbeitet. Also alle Eigenschaften die sowohl für Print als auch Bildschirm zur Anwendung kommen sollen, landen in der content.css. Alles andere lagere ich in die layout.css aus.
Falls ein Element mal an Stelle einer Hintergrundfarbe für die Druckversion einen Rahmen in der Farbe der Hintergrundfarbe erhalten soll, notiere ich zu erst den Rahmen und setzte diesen dann innerhalb @media screen, projection zurück und notiere weitere Eigenschaften wie etwa eine Hintergrundfarbe, welche *nur* für den Bildschirm gelten sollen. So fällt gleich ein Druckstyle mit ab und Eigenschaften müssen nicht unentwegt doppelt für screen und print notiert/gepflegt werden.
Tobi aus Raincastle schrieb am 25.03.2007
Für die unterschiedlichen IE Versionen nutze ich Conditional Comments. Die Hacks finde ich einfach zu umständlich. Und da bei meinen Seiten meist ein CMS zum Einsatz kommt, muss ein evtl. neues Stylesheet auch nicht in diversen HTML-Dateien, sondern nur im zentralen Template eingefügt werden.
Jeena Paradies aus Varberg schrieb am 25.03.2007
Wie machst du es dann mit Anpassungen, die für alle IE-Browser gelten, kopierst du diese in alle vier ie_x.css Dateien? Das finde wiederum ich sehr umständlich weil man nicht auf einen Blick sieht in welcher Datei man was ändern muss.
Du weißt auch dass jede zusätzliche Datei einen extra aufruf im Server bedeutet, auch wenn sie im Cache liegen (weil nachgefragt werden muss ob sich etwas verändert hat). Das kann bei größeren Seiten durchaus problematisch werden.
Anonym schrieb am 26.03.2007
Vorab sei erwähnt, dass ich alle Hacks für IE stets direkt da notier, wo auch alle weiteren Eigenschaften eines Elementes im Standardstylesheet stehen. So habe ich alle Eigenschaften sofort im Blick, welche sich Browserübergreifend auf das jeweilige HTML-Element auswirken. Jeder Hack wird von mir bewusst eingesetzt – auch nur wenn nötig versteht sich von selbst – so dass das Stylesheet im ersten Augenblick nicht valide erscheinen mag. Erstens kann ich hierdurch auf einen CC im HTML-Code verzichten und zweitens hilft es mir unheimlich die Übersicht zu behalten. Im Gegensatz dazu, wenn ich erst beim bearbeiten der Eigenschaften eines Elementes noch andere Stylesheets überblicken müsste, welche noch Sachen enthalten, die wiederum Eigenschaften (für spezielle Browserversionen) überschreiben könnten.
Ich verwende jeweils ein Stylesheet für Screen sowie Projection und eines für Print. Diese beiden importieren via »Escaped Comment-End« und @import-Rule weitere Stylesheets.
Die da wären (Basis):
- layout.css
- content.css
- … bei größeren Projekten, gern auch weiteres Splitting wie etwa eine form.css usw. So bekommt auch ein Nutzer mit IE 5.x auf dem Mac plain-HTML serviert.
Nicht wie im Stylesheet für den Bildschirm, werden im Printstyle jedoch neben dem Import der content.css auch allgemein gültige Eigenschaften notiert. Undezware um die für die Druckversion nicht benötigten Sachen via display: none; auszublenden. Das darf auch der IE 5.x auf dem Mac auslesen und verstehen.
Jetzt geht es aber erst richtig los. In die layout.css packe ich alles – wie der Name schon verrät – was mit dem Layout (Maße und Position der einzelnen Bereiche einer Seite) im entferntesten Sinne zu tun hat.
Die content.css enthält die Eigenschaften aller Inhaltselemente. Also jene Eigenschaften, die zur Formatierung aller HTML-Elemente nötig sind, womit Inhalte HTML-technisch ausgezeichnet werden, wie etwa table, ul, ol, p, h… und so auch für die Printversion von Interesse sind.
Die content.css wird durch die screen.css als auch die print.css importiert und verarbeitet. Also alle Eigenschaften die sowohl für Print als auch Bildschirm zur Anwendung kommen sollen, landen in der content.css. Alles andere lagere ich in die layout.css aus.
Falls ein Element mal an Stelle einer Hintergrundfarbe für die Druckversion einen Rahmen in der Farbe der Hintergrundfarbe erhalten soll, notiere ich zu erst den Rahmen und setzte diesen dann innerhalb @media screen, projection zurück und notiere weitere Eigenschaften wie etwa eine Hintergrundfarbe, welche *nur* für den Bildschirm gelten sollen. So fällt gleich ein Druckstyle mit ab und Eigenschaften müssen nicht unentwegt doppelt für screen und print notiert/gepflegt werden.
Jens Meiert aus Berlin schrieb am 13.04.2007
Ich bin so frei, in dieses Thema sowohl Hinweise auf einen alternativen und noch immer (mit üblichen Risiken) stabilen IE-Syntax-"Filter" sowie die generelle Problematik mit "Conditional Comments" einzurühren. Kann ich mir unmöglich verkneifen, Jeena ;)
Anonym schrieb am 23.04.2007
Meiner Meinung nach ist dein IE7 Hack nicht valide, siehe (http://www.thestyleworks.de/tut-art/ie7.shtml#ie7-hacks)
Valide wäre z.B. *:first-child+html h2 {color:red;}
mfg darki
Jeena Paradies aus Varberg schrieb am 23.04.2007
Der muss auch nicht valide sein, Anonym, denn er ist sowieso in einem conditional comment drinn.