Eine Seite mit sinnvoller HTML-Auszeichnung ist auch ohne CSS nutzbar, wie das 
erste Beispiel-Layout gezeigt hat. Die Verwendung von CSS-Eigenschaften wie float, besonders in Kombination mit margin, kann in älteren Browsern wie dem Netscape 4 zu fehlerhafter Darstellung bis hin zur Unbenutzbarkeit einer Seite führen. Es ist daher ratsam, diese fortschrittlichen CSS-Definitionen nur moderneren Browsern zukommen zu lassen. Hierzu bietet sich logisch an, die CSS-Definitionen nicht wie in den Beispielen im Stylebereich jeder HTML-Datei zu notieren, sondern in einer separaten CSS-Datei auszulagern und diese über die neuere Methode @import einzubinden. Über die Angabe eines Ausgabemediums wie z.B. all würde auch der Internet Explorer für Windows ausgeschlossen.
Sie können die CSS-Definitionen auch in zwei verschiedene Dateien aufteilen: eine für die einfachen Farb- und Schriftzuweisungen, die auch ältere Browser problemlos umsetzen können, und eine weitere für die Definition des Layouts. Erstere binden Sie - auch für ältere Browser - über das link-Element ein. Dies hat außerdem den Vorteil, dass beim Laden der über @import eingebundenen zweiten CSS-Datei die unschöne kurzzeitige Anzeige der Seite ohne Style-Definitionen im Internet Explorer vermieden wird.
Bestimmte CSS-Definitionen machen ein weiteres Stylesheet für den Ausdruck erforderlich, z.B. wenn Sie eine helle Schriftfarbe für einen dunklen Bildschirm-Hintergrund angegeben haben. Diese CSS-Datei binden Sie - ebenfalls für alle Browser - über das link-Element mit einer Medienangabe ein. Hierin können Sie auch bestimmte Bereiche wie z.B. die Navigation, die für den Ausdruck wenig geeignet sind, über display:none ausblenden.
Ein HTML-Dokument, in dem auf diese Art unterschiedliche CSS-Dateien eingebunden sind, sieht folgendermaßen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-basiertes Layout</title>
<link rel="stylesheet" type="text/css" href="basis.css">
<style type="text/css">
@import url(modern.css);
/* evtl. seitenspezifische CSS-Definitionen */
</style>
<link rel="stylesheet" type="text/css" media="print" href="druck.css">
</head>
<body>
<!-- HTML-Quelltext -->
</body>
</html>
Netscape 4 unterstützt auch bei Einbindung über das link-Element nur das Ausgabemedium screen; Sie können ihn über die Angabe anderer Ausgabemedien wie z.B. all ebenfalls ausschließen.
@import-Anweisungen sind stets vor weiteren CSS-Definitionen einzutragen.
Um CSS-Dateien für bestimmte Ausgabemedien nur modernen Browsern einschließlich dem Internet Explorer zur Verfügung zu stellen, binden Sie eine CSS-Datei mit dem entsprechenden media-Attribut über das link-Element ein und referenzieren hierin eine weitere CSS-Datei über @import. Einzelne CSS-Anweisungen können Sie auch in einer über @import eingebundenen CSS-Datei mit Format-Definitionen für unterschiedliche Ausgabemedien versehen.
Der Internet Explorer setzt zwar die für CSS-basierte Layouts erforderlichen Definitionen größtenteils um und muss nicht wie andere ältere Browser hiervon ausgeschlossen werden; die Umsetzung ist aber oft fehlerhaft oder unvollständig, so dass eine Korrektur oder alternative Definitionen erforderlich werden können. Eine Möglichkeit hierfür ist, zunächst die nach den Spezifikationen des W3C korrekten CSS-Anweisungen zu notieren und anschließend eine spezielle CSS-Datei nur für den Internet Explorer einzubinden. Erfreulicher Weise bietet Microsoft dazu mit den 'conditional comments' eine valide Lösung für den Internet Explorer für Windows (die Mac-Versionen sind ohnehin bezüglich der CSS-Umsetzung nicht vergleichbar). Hierbei handelt es sich um spezielle HTML-Kommentare mit einer Bedingung, die der Internet Explorer ab der Version 5 auswertet und hiervon abhängig den im Kommentar enthaltenen HTML-Code ausführt oder nicht. Für alle anderen Browser handelt es sich lediglich um Kommentare, deren Inhalt ignoriert wird.
Die folgenden Beispiele zeigen die Einbindung einer CSS-Datei für alle Browser, einer CSS-Datei nur für moderne Browser mit Ausnahme des Internet Explorers und nachfolgend einige über conditional comments eingebundene CSS-Dateien:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-basiertes Layout</title>
<link rel="stylesheet" type="text/css" href="basis.css">
<style type="text/css">@import url(modern_ohne_ie.css) all;</style>
<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">@import url(ie6.css);</style>
<![endif]-->
<!--[if gte IE 5.5]>
<style type="text/css">@import url(ie55+.css);</style>
<![endif]-->
<!--[if lte IE 5.5999]>
<style type="text/css">@import url(ie55-.css);</style>
<![endif]-->
<!--[if lt IE 5.1]>
<style type="text/css">@import url(ie50.css);</style>
<![endif]-->
</head>
<body>
<!-- HTML-Quelltext -->
</body>
</html>
Wie Sie an den Beispielen sehen, können auch Versionsangaben gemacht werden, die der Internet Explorer mit seiner im Windows-System eingetragenen Versionsnummer vergleicht (wenn Sie zum Testen mehrere Browserversionen installiert haben, wird daher immer die Version des Betriebssystems verwendet).
Die in den conditional comments referenzierten CSS-Dateien werden von folgenden Versionen des Internet Explorers geladen:
[if IE]: alle Versionen (ab 5.0),
[if IE 6]: alle 6er-Versionen,
[if gte IE 5.5]: alle Version ab 5.5 (greater-than or equal = größer oder gleich),
[if lte IE 5.5999]: alle Version bis 5.5 (less-than or equal = kleiner oder gleich),
[if lt IE 5.1]: Version 5.0x (less-than = kleiner als).
In der Praxis ist meist nur eine Unterscheidung zwischen Versionen ab 6 und älteren erforderlich, da der Internet Explorer ab der Version 6 im standardkompatiblen Modus einige Fehler der Vorgänger nicht mehr macht und insbesondere das vom W3C spezifizierte Box-Modell korrekt anwendet. Eine Differenzierung erübrigt sich meist ganz, wenn der Internet Explorer 6 in den abwärtskompatiblen Quirks-Modus versetzt wird, was auch ein beliebiger HTML-Kommentar (oder bei XHTML die Angabe der XML-Deklaration) in der ersten Zeile des Quelltextes bewirkt, da dieser Browser den folgenden Doctype dann nicht mehr erkennt. Beachten Sie aber, dass dieser Fehler im Internet Explorer 7 voraussichtlich behoben sein wird.
Sie sollten den Internet Explorer grundsätzlich nicht über die Dokumenttyp-Weiche in den Quirks-Modus versetzen, da dies auch andere Browser negativ beeinflusst und z.B. Opera ab Version 7 das falsche Box-Modell von Microsoft übernehmen würde.
Oft sind es nur kleine Korrekturen, die für die einheitliche Umsetzung eines CSS-basierten Layouts erforderlich werden und meist reicht es, über eine Browserweiche (auch "Hack" genannt) den Internet Explorer von anderen Browsern zu unterscheiden, da erstgenannter viele CSS-Definitionen nicht standardkonform interpretiert. Browserweichen nutzen spezielle Selektoren oder Schreibweisen, die von Browsern unterschiedlich interpretiert bzw. teilweise übergangen werden. Das folgende Beispiel demonstriert einige ausgewählte Browserweichen:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Browserweichen</title>
<style type="text/css">
body {
color: white; background: black;
font-family: Helvetica, Arial, sans-serif;
}
p {
padding: 0.2em;
}
#attribut {
color: red;
}
p[id]#attribut {
color: lime;
}
p[id] {
border: 1px solid green;
}
#childselector {
color: red;
}
html>body #childselector {
color: lime;
}
#starhtml {
color: lime;
}
* html #starhtml {
color: red;
}
#comment {
color: red;
}
#comment/* */ {
color: lime;
}
#atmedia {
color: red;
}
@media all {
#atmedia {
color: lime;
}
}
#element {
color: red;
}
p#element {
color: lime;
}
#tanhack {
color: lime;
}
* html #tanhack {
color: red;
c\olor: lime;
}
</style>
<style type="text/css">
#tantek {
color: red;
}
#tantek {
voice-family: "\"}\"";
voice-family: inherit;
color: lime;
}
</style>
</head>
<body>
<h1>CSS-Browserweichen</h1>
<p>Die folgenden Beispiele werden standardkonform mit grüner Schrift
im Rahmen angezeigt, ansonsten mit roter Schrift ohne Rahmen.</p>
<p id="attribut">Attribut-Selektor:
wird vom Internet Explorer ignoriert und definiert hier alle Rahmen.</p>
<p id="childselector">Kind-Selektor:
wird vom Internet Explorer ignoriert.</p>
<p id="starhtml">Star-HTML:
wird fälschlich vom Internet Explorer interpretiert.</p>
<p id="comment">Selektor-Kommentar:
wird vom Internet Explorer bis Version 5 für Windows und Mac ignoriert.</p>
<p id="atmedia">Medienangabe:
wird vom Internet Explorer 4 für Windows und den Mac-Versionen ignoriert.</p>
<p id="element">Element-spezifischer Selektor:
wird vom Netscape 4 ignoriert.</p>
<p id="tantek">Tantek-Hack:
wird vom Internet Explorer erst ab Version 6 korrekt interpretiert<br>
- im Netscape 4 kommt es hierdurch zu Fehlern im gesamten Style-Bereich!</p>
<p id="tanhack">Tan-Hack:
beeinflusst nur den Internet Explorer vor Version 6<br>
- eine Kombination des Star-HTML- und Tantek-Hacks für einzelne Definitionen.</p>
</body>
</html>
p[id] {
eigenschaft:wert;
}
Selektiert ein Element (hier <p>), welches ein id-Attribut mit beliebigem Attributwert aufweist - und damit alle hier angeführten Beispiele. Gleichbedeutend zur Angabe der #ID ist dies im Grunde überflüssig, erfüllt aber den Zweck, alle Internet Explorer für Windows bis Version 6 und Netscape 4 auszuschließen.
html>body #ID {
eigenschaft:wert;
}
Selektiert ein Element mit der ID "ID", das sich innerhalb des Elements body befindet, welches wiederum ein direktes Kind-Element von html ist. Dies extra anzugeben wäre an sich überflüssig, es schließt aber ebenfalls alle Internet Explorer für Windows bis Version 6 und Netscape 4 aus. Achtung: Der Selektor body>#ID würde von älteren Versionen des Internet Explorers falsch interpretiert werden.
* html #ID {
eigenschaft:wert;
}
Dies ist zwar ein valider, aber unsinniger Selektor, da html kein Elternelement hat (der Universalselektor * steht für ein beliebiges Element). Alle Internet Explorer für Windows bis Version 6 akzeptieren diese Notation jedoch und interpretieren die nachfolgenden Deklarationen. Dieser Selektor schließt also alle übrigen Browser einschließlich Netscape 4 aus.
#ID/* */ {
eigenschaft:wert;
}
Ein CSS-Kommentar unmittelbar nach dem Selektor schließt den Internet Explorer 4 und 5 für Windows und Mac aus.
@media all {
#ID {
eigenschaft:wert;
}
}
Diese Variante selektiert hier ein Element mit der ID "ID" für alle Medientypen, wodurch ältere Browser ausgeschlossen werden: der Internet Explorer 4 für Windows und alle Mac-Versionen sowie Netscape 4.
p#ID {
eigenschaft:wert;
}
Selektiert ein Element (hier <p>) mit der ID "ID", was den Ausschluss von Netscape 4 zur Folge hat.
* html #id {
e\igenschaft:wert;
}
Die angeführte Notation setzt die innerhalb der Star-HTML-Browserweiche zunächst an ältere Internet Explorer für Windows angepassten Eigenschaften für den Internet Explorer 6 wieder zurück. Setzen Sie das Escape-Zeichen \ an eine beliebige Stelle innerhalb der Eigenschaft, jedoch nicht direkt vor einen der Buchstaben a bis f, da dieser sonst als hexadezimaler Wert interpretiert werden würde. Diese Browserweiche eignet sich ebenfalls zur Korrektur des falschen Box-Modells für ältere Windows Internet Explorer, ist jedoch wegen der dreifachen Angabe eines jeden Wertes etwas aufwändig. Durch die Kombination mit der Star-HTML-Browserweiche werden Probleme mit anderen Browsern ausgeschlossen. Das Kapitel über die Behandlung des Box-Modells enthält ein Beispiel.
selektor {
eigenschaft:wert; /* Deklaration fuer IE 5.x */
voice-family:"\"}\""; /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
voice-family:inherit;
eigenschaft:wert; /* Korrektur fuer andere Browser */
}
Diese Methode beruht auf der Ausnutzung eines Fehlers im Internet Explorer der Version 5.x. Zunächst wird die für den Internet Explorer 5.x vorgesehene Deklaration angeführt und anschließend der Sprachausgabe-Eigenschaft voice-family der unsinnige, aber gültige Wert "}" zugewiesen - die inneren Hochkommata sind gemäß CSS-Syntax mit Backslashes maskiert (CSS-Escape-Sequenz) und daher Bestandteil des Wertes. Korrekt arbeitende Browser werden davon nicht negativ beeinflusst, von alten Versionen des Internet Explorers jedoch wird keine der nachfolgenden Angaben beachtet, da sie die geschweifte Klammer als Ende der Regel interpretieren. Die in der ersten Zeile definierte Deklaration wird zunächst von allen Browsern akzeptiert, die nachfolgende Korrektur für standardkonforme Browser übergeht der IE 5.x. Somit eignet sich diese Browserweiche zur Korrektur des falschen Box-Modells (siehe Beispiel) von Microsoft bei Dokumenten, in denen der Internet Explorer 6 über die Dokumenttyp-Deklaration in den standardkonformen Modus versetzt wurde. Verwenden Sie den Tantek-Hack nur in einer vor Netscape 4 verborgenen CSS-Datei, da in diesem Browser ein schwerer Fehler bei der Interpretation des gesamten Style-Bereichs verursacht wird.
Die auf fehlerhafter oder unzureichender CSS-Implementierung aufbauenden Browserweichen können in aktuellen Browsern unerwünschte Begleiterscheinungen haben. Auch ist nicht ausgeschlossen, dass künftige Browserversionen zwar weiterhin den Fehler enthalten, den Sie mittels eines Hacks korrigieren, dies jedoch nicht mehr funktioniert, da just die Programmstelle korrigiert wurde, die die Nutzung des Hacks erst ermöglicht hat. Sie sollten daher das über eine Browserweiche erzielte Ergebnis mit unterschiedlichen Browsern kritisch begutachten und dies in regelmäßigen Abständen mit neu erschienenen Versionen wiederholen.
Auf der sicheren Seite sind Sie, wenn Sie nach Möglichkeit weitestgehend auf den Einsatz von CSS-Hacks verzichten.
|
| |
 |
Einführung in XML
|
 |
CSS-basierte Navigationsleisten
|
 SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts |
|
© 2005 Impressum