3.5 CSS-Anpassungen für den Internet Explorer
Der Internet Explorer bietet seit der Version 5 eine umfassende Unterstützung für CSS 1 und eine gute Unterstützung für CSS 2. Insbesondere die CSS 2-Unterstützung enthält jedoch zahlreiche Fehler, die bei Nichtbeachtung schnell zu Darstellungsfehlern in CSS-Layouts führen können.
Die Quelltextstruktur des YAML-Basislayouts ist so angelegt, dass sich auf dieser Basis mit Hilfe von CSS eine Vielzahl möglicher Layoutvariationen erstellen lassen, ohne dass Änderungen im zugrunde liegenden Markup erforderlich sind. Um diese große Flexibilität gewährleisten zu können, müssen die zahlreichen CSS-Bugs des Internet Explorers zuverlässig abgefangen werden.
Das Auftreten von CSS-Bugs des Internet Explorers richtet sich nach dem Vorhandensein bestimmter Quelltext-Strukturen in Verbindung mit bestimmten Kombinationen aus floatenden, positionierten oder statischen Elementen. Aufgrund der im YAML-Framework fest vorgegebenen Quelltext-Struktur und der bekannten Modifikationsmöglichkeiten (Spaltenanordnungen) ist das Auftreten der meisten CSS-Bugs berechenbar und damit sehr gut beherrschbar.
Der Umgang mit diesen Bugs richtet sich nach der Art des Auftretens, wobei hier innerhalb des YAML-Frameworks zwei Fälle unterschieden werden:
- struktur- bzw. layoutunabhängige Bugfixes
Der überwiegende Teil der CSS-Bugs lässt sich aufgrund der bekannten Quelltextstruktur sehr einfach beheben. Ist ein solcher Bugfix auch noch in allen möglichen Modifikationen (Spaltenanordnungen) des Basislayouts ohne störende Nebenwirkungen einsetzbar, so wird dieser als struktur- bzw. layoutunabhängig bezeichnet.
Alle struktur- bzw. layoutunabhängigen Bugfixes werden bei YAML in einem speziellen Stylesheet, der Datei iehacks.css im Verzeichnis yaml/core/ zusammengefasst und sollte immer unverändert bleiben.
- struktur- bzw. layoutabhängige Bugfixes
Ein geringer Teil der CSS-Bugs wird nicht in jedem Fall ausgelöst, bzw. es gibt keinen Bugfix, der unabhängig vom jeweils umgesetzten Layout immer funktioniert. Diese Bugfixes müssen durch den Seitenersteller in Abhängigkeit des von ihm umgesetzten Layouts ggf. angepasst werden. Sie werden daher als struktur- bzw. layoutabhängig bezeichnet.
Hierzu zählen weiterhin all jene Bugfixes, welche die Korrektur der fehlerhaften Darstellung von Inhaltselementen betreffen. Da YAML die Inhalte nicht kennt, muss hier der Seitenersteller diese Bugfixes generell selbst ergänzen.
Zu jedem YAML-basierten Layout sollte daher Anpassungsdatei patch_[layout].css für den Internet Explorer angelegt werden, wobei sich der Platzhalter [layout] im Dateinamen, der besseren Übersicht wegen, am Namen des zugehörigen zentralen Stylesheets orientieren sollte. Eine Vorlage für ein solches Anpassungs-Stylesheet, die Datei patch_layout_draft.css befindet sich im Verzeichnis yaml/patches/.
Aufbau der CSS-Anpassungsdatei für den Internet Explorer
Wie eben erläutert, gehört zu jedem YAML-basierten Layout (bzw. zu jedem zentralen Stylesheet, siehe Abschnitt 3.3) eine IE-Anpassungsdatei patch_[layout].css. Der Aufbau eines solchen Stylesheets soll im Folgenden erläutert werden. Hierzu ein Blick in die Vorlagedatei patch_layout_draft.css aus dem Verzeichnis yaml/patches/.
/* Layout independent adjustmenst | Layout-unabhängige Anpassungen -------- */
@import url(/yaml/core/iehacks.css);
/* Layout dependent adjustments | Layout-abhängige Anpassungen ------------- */
@media screen, projection
{
/* add your adjustments here | Fügen Sie Ihre Anpassungen hier ein */
...
}
Wie Sie erkennen, werden in dieser Datei sowohl layoutunabhängige- als auch layoutabhängige CSS-Anpassungen zusammengefasst. Dies hat den Vorteil, dass Sie nur diese eine CSS-Datei in das Layout integrieren brauchen.
Im ersten Teil erfolgt der Import der Datei iehacks.css aus dem core/ Verzeichnis des YAML-Frameworks. Wie bereits erwähnt, enthält diese Datei alle struktur- und layoutunabhängigen Bugfixes und kann daher unverändert in jedes YAML-basierte Layout eingebunden werden.
Im zweiten Teil finden Sie eine inhaltsleere @media Regel. Ab hier können Sie weitere, ggf. vorgefertigte IE-Stylesheets einbinden (z.B. für den Navigationsbaustein nav_vlist). Weiterhin ist dies der Platz, an dem Sie struktur- bzw. layoutabhängige Bugfixes bzw. Bugfixes für die korrekte Darstellung von Inhaltselementen ergänzen können.
Dieses IE-Anpassungsstylesheet übernimmt damit ähnliche Aufgaben, wie das zentrale Stylesheet. In ihm werden letztlich sämtliche CSS-Anpassungen zusammengefasst und an den Internet Explorer übergeben.
Einbindung der CSS-Anpassungen in das YAML-Layout
Viele Bugfixes stützen sich auf die Ausnutzung der ebenso zahlreich vorhandenen Parser-Bugs - insbesondere der älteren Versionen des Internet Explorers. Der daraus entstehende CSS-Code ist nicht immer valide und sollte daher ausschließlich dem IE zugänglich gemacht werden. Dies erfolgt über einen Conditional Comment innerhalb des HTML Headers <head>..</head>. Dies wurde am Ende des Abschnitts 3.3: Das zentrale Stylesheet bereits erwähnt.
...
<!--[if lte IE 7]>
<link href="css/patches/patch_col3_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
Die Bedingung lte IE 7 bedeutet: "kleiner oder gleich Internet Explorer Version 7.0". Dieser spezielle Kommentar wird nur vom Internet Explorer erkannt und die darin befindlichen Anweisungen ausgeführt. Für alle anderen Browser handelt es sich um einen normalen HTML-Kommentar dessen Inhalt ignoriert wird.
Nachfolgend werden alle für den Layoutprozess relevanten CSS-Bugs des Internet Explorers kurz erläutert und die Integration entsprechender Bugfixes/Workarounds im Rahmen des YAML-Frameworks beschrieben.
