Browser-sicheres CSS
IE & Co. überlisten

Der Trend

Browser-sicheres CSS

CSS-Design ist in. Nicht nur ist die Verwendung von Stylesheets für das Layout die semantisch und handwerklich bessere Alternative zum althergebrachten Tabellenlayout und ermöglicht erst barrierefreie Websites. Inzwischen hat sich auch herumgesprochen, dass standardkonforme Seiten mit wenig überflüssigem Quellcode von Suchmaschinen besser indexiert werden und ? gerade bei viel besuchten Sites ? durch Reduktion des Traffics bares Geld sparen können.

Die unterschiedliche und oftmals noch fehlerhafte Interpretation von Stylesheets durch die verschiedenen Browser aber macht gerade Umsteigern das Leben schwer. Der Wechsel vom Design in tabellengestützten Rastern zum freien Layout mit CSS-Boxen erfordert Umdenken und Abschied von manchen gewohnten Herangehensweisen. Doch die gewonnene Freiheit beim Design ? das beste Beispiel für die unendlichen Möglichkeiten des CSS-Designs stellt www.csszengarden.com dar ? lohnt die Mühe, und auch immer mehr große Websites stellen auf CSS-Design um.

Gute und schlechte Browser

Browser-sicheres CSS

Die momentan bei den Surfern im Einsatz befindlichen Browser lassen sich bezüglich ihrer CSS-Fähigkeiten grob in vier Gruppen einteilen:

Firefox 1, Mozilla ab 1.5, Opera ab 7 und Safari ab 1.1 unterstützen den aktuellen Standard CSS 2.1 sehr ordentlich und teilweise sogar bereits Eigenschaften des designierten Nachfolgers CSS 3.

Der Internet Explorer von Microsoft in der aktuellsten Version 6 hinkt demgegenüber schon etwas hinterher, erlaubt aber trotzdem noch komplettes Layout mit CSS ? mit Einschränkungen trifft das auch auf die Version 5.5 zu.

Der Internet Explorer 5 und die letzten Mac-Versionen 5.1 und 5.2 sind die aktuellen »Sorgenkinder« der CSS-Entwickler. Obwohl prinzipiell auch hier noch Layout mit CSS möglich ist, erfordern diese Browser an vielen Stellen Sonderlösungen und zusätzliche Aufmerksamkeit. Glücklicherweise sinken ihre Marktanteile, und auch auf der Macintosh-Plattform steht mit Safari ein CSS-tauglicher Browser zur Verfügung.

Noch ältere Versionen des Internet Explorers und der bei CSS-Entwicklern berüchtigte Netscape 4 spielen inzwischen nur noch in Nischen eine Rolle und können für die meisten Anwendungen ignoriert werden. Vor ihnen werden die CSS-Anweisungen einfach versteckt, so dass zumindest die Inhalte auch mit diesen alten Browsern erreicht werden können.

Es gibt eine Reihe von Browsern, die auf unterschiedlichen Versionen der oben Genannten basieren und entsprechend funktionieren: Neue Netscape-Browser verwenden die Rendering-Engine von Mozilla (»Gecko«), der Linux-Browser Konqueror hat den gleichen Kern wie Safari, und eine ganze Reihe von Browsern basieren auf unterschiedlichen Internet Explorern.

Browser-Hacks

Browser-sicheres CSS

Um diese Unterschiedlichkeiten und Fehler zu umgehen, haben CSS-Entwickler die Hacks erfunden, kleine Tricks, ohne die Browser-übergreifendes CSS-Layout derzeit unmöglich wäre. Die drei wichtigsten Hacks stellen wir Ihnen hier vor. Eine umfassende Übersichtet bietet darüber hinaus: css-discuss.incutio.com/?page=CssHack.

Am bekanntesten ist der von Tantek Çelik entwickelte Box-Model-Hack, mit dem ein Fehler des Internet Explorers (Version 5, 5.5 und unter Umständen auch 6) behoben werden kann. Der Hack ist inzwischen weiterentwickelt worden ? zum vereinfachten Box-Model-Hack und zum modifizierten vereinfachten Box-Model-Hack:

Nach dem CSS-Box-Model bezieht sich die Eigenschaft width auf die Breite des Inhaltes einer Box ? border, margin und padding werden hinzugezählt.

Im Gegensatz dazu betrachtet der Internet Explorer width als die Gesamtbreite des Elementes bis zu und noch einschließlich der border.

Mit der folgenden Notation

#box {
  width: 100px;
  border: 10px;
  padding: 5px;}

erreichen Sie in CSS-konformen Browsern eine Boxbreite von 130 Pixel (100 px + 2*10 px + 2*5 px) während der Internet Explorer die Box insgesamt nur 100 Pixel breit anlegt.

Der Box-Model-Hack nutzt einerseits die Tatsache, dass später notierte Anweisungen vorher notierte überschreiben, und bedient sich andererseits eines weiteren Fehlers im Internet Explorer:

#box {
  width: 100px;
  border: 10px;
  padding: 5px;}

* html #box {
  width: 130px;
  w\idth: 100px;}

Der Hack beginnt mit dem CSS-Joker *, dem Zeichen, das für ein beliebiges Element steht. * html #box bedeutet also ein beliebiges Element, welches vom Element html gefolgt wird, woraus das Element #box folgt. Da eine Webseite immer mit html beginnt, trifft diese Anweisung niemals zu ? die Anweisungen in den Klammern werden also niemals ausgeführt. Der Internet Explorer jedoch ignoriert das * und setzt die Boxbreite gemäß der ersten Zeile auf 130px ? passend für die Versionen 5.x. Die folgende Zeile wird auf Grund des enthaltenen \ nur vom Internet Explorer 6 interpretiert und setzt die Breite wieder auf die richtigen 100 px.

Alte Browser ausschließen

Browser-sicheres CSS

Gut strukturierte CSS-formatierte Seiten lassen sich auch ohne das Stylesheet noch komplett lesen ? eben ohne Formatierung. Wenn das Stylesheet durch

eingebunden ist, wird es von den älteren Browsern Netscape 4, Internet Explorer 3 und 4 und Konqueror 2 nicht mehr aufgerufen. Dadurch erhalten diese Browser ? und alle anderen Anzeigegeräte, die kein CSS verstehen ? immerhin noch den Inhalt der Seite dargeboten.

Der Internet Explorer für Macintosh verhält sich in vielerlei Hinsicht anders als seine Verwandten auf der Windows-Plattform. Mit diesem Hack können Sie Anweisungen vor dem IE für Macintosh verstecken oder nur für ihn zuweisen.

Versteckt vor IE für Macintosh:

/* ohne IE/Mac \*/
keinMacIE { ... }
/**/

Nur für IE für Macintosh:

/* nur IE/Mac \*//*/
nurMacIE { ... }
/**/

Beide Hacks beruhen auf dem Prinzip, dass der IE für Macintosh nach einem \ die nächste Anweisung übersieht.

Obwohl Hacks in einigen Fällen die einzige praktische Lösung für ein Problem sind, ist ihre Anwendung immer nur die zweitbeste Lösung.

Überzeugen Sie sich zunächst einmal, ob ein Hack wirklich notwendig ist. Testen Sie die Seite in Firefox und Opera ? wenn diese beiden Browser das gleiche unerwünschte Ergebnis anzeigen, haben Sie vielleicht einen strukturellen Fehler in Ihrer CSS-Konstruktion oder sich ganz einfach verschrieben.

Wenn Sie Hacks verwenden, sollten Sie diese von vornherein umfassend kommentieren und am besten in eigene Stylesheets auslagern, die Sie über @import einbinden. So können Sie den Hack bei Bedarf schnell wieder entfernen und wissen immer genau, was an Ihrem Stylesheet die Essenz bildet und was die Browser-Hacks sind.

Eine gute Methode ist es, unproblematische Styles wie Farben und Schriftzuweisungen in einem Stylesheet zu sammeln ? das können Sie dann auch alten Browsern zeigen, indem Sie es mit einbinden ? und die moderneren Formatierungen in einem zweiten, per @import eingebundenen Stylesheet nachzuladen.

Hacks selbst entwickeln

Browser-sicheres CSS

Wird für eine spezielle Situation ein Hack benötigt, der noch nirgendwo genannt ist, können Sie durch Kombination mehrerer bekannter Hacks selbst einen passenden zusammensetzen.

Die meisten Hacks beruhen auf der Ausnutzung eines oder mehrerer Interpretationsfehler von Browsern, die entweder einzeln wirken oder für eine bestimmte Wirkung kombiniert werden. Sie müssen also einen Fehler finden, der den anzusteuernden Browser betrifft. Hinweise dazu finden Sie zum Beispiel bei den bereits bekannten Hacks.

Wenn ein Hack den Internet Explorer und Opera ausschließt und ein weiterer Opera und Mozilla, dann können sie durch aufeinanderfolgendes Anwenden einen Hack konstruieren, der nur Opera betrifft. Kevin Smith hat eine Tabelle erstellt, die zeigt, welche Browser welche speziellen Notationen unterstützen: www.centricle.com/ref/css/filters.

Ob ein Hack einen Browser ausschließt oder nur ihn berücksichtigt, spielt keine Rolle. Schließlich lassen sich CSS-Anweisungen ja überschreiben. Nehmen wir an, Sie wollen für den Internet Explorer 5.5 die Schriftfarbe Rot anwenden und für alle anderen Browser Grün.

Steht Ihnen ein Hack zur Verfügung, mit dem Sie eine Regel nur für den IE 5.5 anwenden können, definieren Sie im Stylesheet zuerst die Schriftfarbe Grün (für alle Browser) und danach Rot (nur für IE 5.5).

Sorgt Ihr Hack dafür, dass eine Regel nicht vom IE 5.5 interpretiert wird, definieren Sie zunächst die Schriftfarbe Rot (für alle Browser) und überschreiben dann die Anweisung wieder mit Grün (für alle außer dem IE 5.5). In beiden Fällen ist das Ergebnis dasselbe.

Fehlersuche bei CSS-Problemen

Browser-sicheres CSS

Hier ein paar Tipps zur Fehlersuche bei CSS-Problemen:

- Kontrollieren Sie die CSS-Anweisungen auf Schreibfehler. Viele Probleme lassen sich auf Tippfehler, fehlende Zeichen oder Ähnliches zurückführen.

- Kontrollieren Sie den HTML-Code auf Fehler. Durch die Verwendung des HTML-Validators (validator.w3.org) geht das schnell.

- Beginnen Sie mit den standardkonformen Browsern und testen danach mit anderen. Wenn eine Anzeige in Firefox und Opera gleich aussieht, können Sie sicher sein, dass es nicht um einen Bug handelt, sondern den Spezifikationen entspricht.

- Fehler im Internet Explorer sind oft auf die fehlerhafte Box-Model-Interpretation zurückzuführen. Das kann auch im Internet Explorer 6 passieren, wenn der XHTML-Deklaration ein XML-Prolog vorangestellt ist.

- Gibt es die entsprechende Eigenschaft überhaupt? Gerade am Anfang ist es leicht möglich, HTML- und CSS-Eigenschaften zu verwechseln. Beliebt ist die Verwechslung von clear: both (CSS) und clear=all (HTML).

- Existiert das angestrebte Verhalten überhaupt für den betreffenden Browser, oder verwenden Sie vielleicht eine proprietäre Eigenschaft?

- Begeben Sie sich zurück auf sicheren Boden. Kommentieren Sie alle neu gemachten Anweisungen aus, bis Sie wieder eine nachvollziehbare Anzeige haben. Setzen Sie dann die neuen Anweisungen schrittweise wieder ein, bis Sie den Fehler gefunden haben.

- Kommentieren Sie alle unnötigen Anweisungen erst einmal aus, um die Komplexität des Stylesheets zu verringern.

- Setzen Sie farbige Rahmen um Kästen, damit Sie genau sehen, wie deren Abmessungen sind.

- Setzen Sie explizit Werte. Browser verwenden teilweise unterschiedliche Vorgaben für nicht definierte Werte.

- Verwenden Sie die Anweisung !important. Wenn eine Eigenschaft korrekt angewandt ist und dennoch keinen Effekt hat, wird sie vielleicht von einer höherwertigen überschrieben.

- Wenn Sie mit float arbeiten und sich Layoutfehler zeigen, liegt es oft am fehlenden oder falsch gesetzten clear.

- Achten Sie auf Rundungsfehler. Wenn prozentual ausgezeichnete Bereiche umspringen, werden möglicherweise 50% + 50% größer als 100% berechnet. Verkleinern Sie die Bereiche.

CSS Entwurfsverfahren

Browser-sicheres CSS

Folgendes Verfahren beim Entwurf einer CSS-Seite hat sich bewährt:

- Identifizieren Sie die Funktionsbereiche der Site und legen diese als