SELFHTML aktuell Artikel CSS
CSS:
Browserweiche - Ausschluss mangelhafter Browser
Roland Skop
Hinweise zum Thema
Beispiel mit Erläuterungen
Weiterführende Links
| SELFHTML aktuell Artikel CSS | |
|
CSS:
|
|
|
| |
| E-Mail: |  selfhtml@skop.net |
|---|---|
| Homepage-URL: |  http://skop.net/ |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
Bei der Erstellung eines komplexen CSS-Layouts ergeben sich aufgrund der mangelhaften Implementierung der CSS-Spezifikation in diversen Browsern oftmals Probleme. Durch Verwendung bestimmter Definitionen lassen sich diese Schwierigkeiten umgehen. Dazu werden problematische Eigenschaften in Bereiche verschoben, die von den Browsern nicht verstanden und somit beim Rendern der Seite übergangen werden.
Vor allem in der immer noch häufig anzutreffenden Version 4 des Netscape-Browsers ist die CSS-Implementierung äußerst unzureichend, zahlreiche Definitionen bewirken unvorhersehbare Ergebnisse. Im ersten Beispiel wird erläutert, wie Sie N4.x vor solchen Stylesheets schützen können.
Doch auch aktuelle Browser, allen voran der Microsoft Internet Explorer, sind nicht in der Lage, alle Eigenschaften korrekt umzusetzen. Das zweite Beispiel verdeutlicht, wie dieses Problem zu umgehen ist.
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></title>
<style type="text/css">
<!--
@media all {
a { border: 1px solid #f00; }
}
-->
</style>
</head>
<body>
<p>Dieser <a href="#">Verweis</a> wird von Browsern, die
@media verstehen mit einem roten Rahmen dargestellt.</p>
</body>
</html>
In Netscape 4.x sind Verweise, denen mit border: ein Rahmen zugewiesen wurde, nicht anklickbar. Da dieser Browser jedoch die
Format-Definition für unterschiedliche Ausgabemedien
- im Beispiel @media all - nicht versteht, wird a { border: 1px solid #f00; } übergangen. Schreiben Sie
also alle problematischen Angaben in diesen Bereich.
Es ist ebenso möglich, Netscape 4.x unter Verwendung folgender Einbindungsarten von Ihren Stylesheets fernzuhalten:
<link href="style.css" rel="stylesheet" type="text/css" media="(Ausgabemedium)"> im Head der Seite (HTML-Syntax)@import url("style.css"); innerhalb von Stylesheets (CSS-Syntax)Um diesen Bug auszunützen, erstellen Sie ein Basis-Stylesheet und binden es wie gehabt in Ihre Seiten ein. In der Datei
style.css, welche Sie wie oben angeführt zusätzlich einbinden, können Sie nun weitere Angaben definieren,
ohne Netscape 4.x damit zu überfordern.
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></title>
<style type="text/css">
<!--
#inhalt {
position: absolute;
width: 200px;
z-index: 1;
/* usw. */
}
#nav {
position: absolute;
top: 30px;
left: 150px;
width: 200px;
z-index: 2;
/* usw. */
}
#nav[id] {
position:fixed;
}
-->
</style>
</head>
<body>
<div id="nav">
<p>Dieser Bereich wird in Mozilla, Opera und Konqueror fixiert.</p>
<p>In Browsern, die den Attribut-Selektor [id] nicht verstehen,
wird dieser Bereich absolut positioniert und scrollt daher mit.</p>
</div>
<div id="inhalt">
<p>Fülltext</p>
<!-- usw. -->
</div>
</body>
</html>
Die Positionierung
mittels position:fixed führt im Internet Explorer zu einer falschen Darstellung.
Im Stylesheet wird daher zunächst das DIV mit der ID nav absolut positioniert. Anschließend wird diesem Bereich
mittels des Attribut-Selektors [id] die Eigenschaft position:fixed zugewiesen. Zitat aus der Spezifikation
der 
CSS2-Selektoren: E[foo] matches any E element with the "foo" attribute set (whatever the value).
Im Beispiel bedeutet dies, dass der verwendete Attribut-Selektor #nav[id] auf das Element nav wirkt, wenn
es ein Attribut id besitzt, unabhängig von dessen Inhalt. Der Internet Explorer versteht keine Attribut-Selektoren -
durch Verwendung ebendieser ist es daher möglich, Stylesheets, die ihn überfordern, vor ihm zu verstecken.
Ebenfalls gut geeignet ist diese Methode, um Probleme mit dem Box-Modell
zu umgehen. Positionieren Sie Elemente zunächst so, dass sie im MSIE korrekt dargestellt werden und ändern Sie die Maße
anschließend durch den Einsatz dieses Tricks auf die korrekten Werte.
Das Beispiel enthält einige Absätze Fülltext, um die Seitenlänge zu vergrößern. Dadurch wird die Fixierung des Bereiches #nav in den Browsern Mozilla, Opera und Konqueror ersichtlich, wenn Sie die Seite scrollen.
Die folgenden Stellen werden empfohlen, um die obigen Beispiele besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.
SELFHTML: CSS-Browserweichen zum Ausschließen älterer Browser
SELFHTML: Format-Definitionen für unterschiedliche Ausgabemedien
SELFHTML: Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien
W3C: Attribut-Selektoren in CSS2
How to hide CSS from buggy browsers