Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
19.1 Patches und Hacks
Ohne Patches (dasselbe wie Hacks) wäre in den vergangenen Jahren das Layouten mit CSS in vielen Fällen unmöglich gewesen. In manchen CSS-Büchern ist dementsprechend der Abschnitt über Patches umfangreicher als die Erklärung wichtiger Konzepte wie z. B. der Kaskade.
Vor dem Einbau von Patches gründlich checken
Ganz verzichten kann man darauf immer noch nicht, aber es bleibt zu hoffen, dass mit dem langsamen Aussterben alter Browser die Notwendigkeit stets weiter abnimmt. Testen Sie die Seite in standardkonformen Browsern wie Firefox oder Opera und versuchen Sie auszuschließen, dass auf Ihrer Seite ein Denkfehler vorliegt.
Ob ein bestimmter Browser Probleme mit einer bestimmten Eigenschaft hat, können Sie auf folgender Website überprüfen:
Unentbehrlich.
Inline-Patches und zusätzliche Stylesheets
Wann immer einige Browser eine Spezialbehandlung zur korrekten Darstellung von CSS benötigen, gibt es im Wesentlichen zwei Möglichkeiten:
- Inline-Patches: Notierung der Patches im Stylesheet selbst, direkt bei den betroffenen Styles.
- Zusätzliche Stylesheets: Notierung der Patches in einem zusätzlichen Stylesheet, das nur bestimmte Browser zu sehen bekommen.
Inline-Patches sind sehr praktisch zum Testen während der Entwicklungsarbeit, werden auf Dauer aber unübersichtlich und schwer zu managen.
Zusätzliche Stylesheets haben den Vorteil, dass das ursprüngliche und korrekte CSS besser zu lesen und die Verwaltung der Patches einfacher ist. Beispiele dafür werden Sie weiter unten mit der @import-Weiche und den Conditional Comments kennenlernen.
Inline-Patches: Sternchen & Co.
Als Vertreter der Inline-Patches möchte ich Ihnen den Sternchen-Hack kurz vorstellen, den Sie im Verlauf des Buches bereits kennengelernt haben:
* html div.galerie { height: 1%; }
Mit dem Sternchen-Hack kann man Styles explizit an den Internet Explorer bis V6 geben.
- Der Selektor * html wählt alle Elemente aus, in denen das Element html enthalten ist.
- Da html jedoch das Stammelement ist, gibt die Anweisung keinen Sinn, und fast alle Browser ignorieren deswegen den kompletten Style.
- Fast alle, denn der Internet Explorer bis inklusive V6 ignoriert das Sternchen am Anfang und arbeitet den Rest der Zeile ab.
Zum Testen während der Entwicklung ist der Sternchen-Hack sehr praktisch. Nachteil ist, dass die Patches über das ganze Stylesheet verteilt sind und man leicht die Übersicht verliert.
Alle Inline-Patches mit zum Teil so wunderschönen Namen wie Tantek’s Box Model Hack, Vereinfachter Box Model Hack und Erweiterter Vereinfachter Box Model Hack stehen direkt im CSS und erschweren das Lesen der Styles zum Teil enorm.
Einige CSS-Autoren scheinen nach dem Motto »Je mehr Patches, desto mehr Experte« zu arbeiten. Das Gegenteil ist der Fall: Sie sollten Patches nur einsetzen, wenn es gar nicht anders geht.
@import – Styles vor ganz alten Browsern verstecken
@import ist bei der Verbindung von HTML und CSS eine Alternative zu link und hat den zugegeben immer unwichtiger werdenden Vorteil, dass ururalte Browser wie Netscape 4 den Befehl nicht verstehen und deshalb die für sie so schwer verdaulichen CSS-Regeln gar nicht zu sehen bekommen. Hier ein Beispiel:
<head>
<!-- Andere HTML-Elemente -->
<style type="text/css">
@import url(bildschirm.css);
</style>
</head>
Um bei @import das CSS auf ein bestimmtes Ausgabemedium zu beschränken, schreiben Sie es einfach hinter den Befehl (geht nicht im IE6 und kleiner):
<head>
<!-- Andere HTML-Elemente -->
<style type="text/css">
@import url(bildschirm.css) screen;
@import url(druckversion.css) print;
</style>
</head>
Mehr zu @import
Weitere Details zu @import können Sie bei The Styleworks nachlesen: