Webseite für alle Browser optimieren

Webseiten für alle Browser optimieren!

Eine Website erstellen, die in Opera, Firefox, Internet Explorer, Konqueror und so weiter gleichermaßen gut läuft bzw. aussieht, ist gar nicht so einfach. Dieses Tutorial soll einige Aspekte beleuchten und Hilfestellung geben, um dies zu erreichen.

firefox internet explorer

Vorwort

Es ist schon lange so und es wird noch lange so bleiben.

Die Rede ist vom unterschiedlichen Verhalten der einzelnen Internet Browser. Jeder Seitenprogrammierer kennt das leidige Problem. Da hat man ein schönes Design erarbeitet und setzt es in XHTML um. Im Firefox sieht es echt toll aus. Im Internet Explorer 7 passt es auch juhu. In der Version 6 verschiebt sich die rechte Spalte nach aussen. Naja egal, den Browser verwendet bald keiner mehr. Den Konqueror probier ich erst gar nicht aus, der ist ja eh nur für Linux. Oje im Opera verschiebt sich noch mehr...

Vor solchen oder ähnlichen Problemen steht definitiv jeder Sitebauer. Und kaum ein Webdesigner wird so unprofessionell sein, einfach einige Browser zu ignorieren und somit viele potenzielle Besucher auszuschliessen bzw. zu verschrecken. Allerdings kann man es auch übertreiben. Meiner Meinung nach ist es wirklich nicht nötig, noch die alten Internet Explorer vor Version 5 mit einzubeziehen. Die verwendet nun wirklich kaum mehr einer.

Warum verhalten sich die ganzen Browser denn so unterschiedlich? Jeder Entwickler meint, unbedingt sein eigenes Süppchen kochen zu müssen. Das macht es dem Webdesigner sehr schwer, vernünftig zu arbeiten. Andererseits wäre die Entwicklung der Web-Formatierung bei weitem nicht so weit fortgeschritten wie das heute der Fall ist, wenn die Entwickler nicht ihre Eigenheiten mit einbrächten. Denn, wenn auch manchmal viel Schwachsinn erfunden wird, so sind doch auch richtungsweisende Entwicklungen darunter, die ihren Weg in die Spezifikationen des W3C (Das W3C ist ein Konsortium für die Einhaltung von Webstandards.) finden. Und das schöne ist, die meisten Browserhersteller halten sich auch zunehmend an diese Spezifikationen. So übernimmt nach einiger Zeit oft der eine Hersteller die Erfindung des anderen.

Neuentwicklungen wird es immer geben und somit bleibt auch das Design-Problem bestehen. Im Allgemeinen kann man sagen, die meisten Probleme machen bzw. machten die Internet Explorer von Microsoft. Die Version 7 ist für den Designer nicht mehr so problematisch. Aber für den Anwender ist dieser Browser alles andere als optimal. Manch einer spricht auch von einer Zumutung. Von Glück wird mancher sprechen, ist doch die Verbreitung des Internet Explorers stark zurück gegangen. Wenn er auch immer noch dominiert. Wenn man jetzt behauptet, die starke Verbreitung des Internet Explorers liegt am Missbrauch der Monopolstellung die Microsoft zweifesfrei noch hat, muss das nicht unbedingt so falsch sein. Dies legt zumindest das Urteil des europäischen Kartellamtes nahe. Microsoft muss ca. eine halbe Milliarde Euro Strafe wegen Missbrauchs seiner Monopolstellung berappen, hieß es bei den Nachrichtenagenturen. Am angenehmsten für den Designer und den Anwender ist wohl der Firefox. Aber auch Opera macht eine echt gute Figur und wurde immer beliebter, seit er kostenlos ist. (Opera und Firefox hier im Downloadbereich)

Table versus DIV

Reine Tabellenlayouts sind heutzutage out. Tabellen werden nur noch benutzt, wo sie wirklich benötigt werden. Stattdessen verwendet man DIV Elemente und formatiert sie entsprechend mit Cascading Stylesheets. Auf diese Weise bleibt der Code viel kleiner, als mit Tabellen. Die Site wird also schneller, übersichtlicher und effizienter. So sind zum Beispiel viel einfacher, möglichst barrierefreie Layouts zu realisieren. Wer bisher noch mit Tabellen arbeitet, wird sich wohl oder übel in das Thema CSS und tabellenloses Layout einarbeiten müssen. Und das ist nicht ganz trivial. Hier bieten sich sehr viele Gestaltungsmöglichkeiten und Kombinationen, die man nicht einfach mal schnell erlernen kann. Aber ganz so schwer ist es nun auch wieder nicht. Schlimmer ist die Tatsache, daß teilweise jeder Browser anders auf die verschiedenen CSS-Befehle reagiert.

Die richtige Technik verwenden, bzw. den Code optimal schreiben.

Es gibt Gott oder wem auch immer sei Dank, einige Hilfsmittel, um ein Browserübergreifend einheitliches und funktionierendes Design zu bewerkstelligen. Diese Hilfsmittel sollten jedoch immer die letzte Wahl sein und nur eingesetzt werden, wenn nichts anderes mehr hilft. Nur dann ist ein sauberer und valider Code gewährleistet. So gerät man leicht in Versuchung, einen Hack zu verwenden, obwohl sich das Problem auch mit den Möglichkeiten von CSS hätte lösen lassen. Aber um es gleich von Anfang an klar zu stellen: Um so (grafisch) aufwändiger die Konstruktion, um so warscheinlicher wird man nicht umhin kommen, diese Hilfsmittel zu verwenden.

Browserhacks

Es gibt verschiedene Hacks für verschiedene Browser in verschiedenen Sprachen. Für die Formatierung von Website-Elementen benutzt man heutzutage fast ausschließlich Cascading Style Sheets, also CSS. Entweder in Verbindung mit Javascript oder auch rein in CSS. Javascript-Hacks beinhalten ja oft CSS-Anweisungen, die dann zur Laufzeit verändert werden. Auch bei anderen Script-Sprachen ist das der Fall. Für reines CSS also Cascading Style Sheets spricht die Tatsache, daß der Anwender kein Javascript aktiviert haben muss in seinem Browser. Auch eine externe Datenbank ist nicht nötig. So mancher schaltet Javascript aus Sicherheitsgründen ab. CSS hingegen muss nicht aktiviert werden. Es funktioniert in allen halbwegs modernen Browsern mehr oder weniger. Also leicht unterschiedlich. Diese leichten Unterschiede müssen wir irgendwie ausgleichen.

An dieser Stelle soll aber auch nicht verschwiegen werden, daß gerade die Kombination aus Javascript und CSS sehr effektiv ist. In unserem Beispiel wäre der Einsatz von Javascript jedoch etwas fahrlässig. Denn wie gesagt, sollte ein User Javascript abgeschaltet haben, zerhackt es unter Umständen unser ganzes schönes Design auf dessen Browser und schlimmstenfalls funktioniert die Navigation nicht richtig. Wir benutzen also eine CSS-Weiche ohne Java Script.

CSS Weiche

Die CSS Weiche wird benutzt, um die CSS Anweisungen nur vom gewünschten Browser interpretieren zu lassen. Das heißt also: Browser A soll das und das machen, Browser B soll es nicht machen und Browser C soll wieder was anderes machen. Ich stelle hier mal einige Weichen vor, mit denen wir auch gleich ein bischen herumspielen. Keine Angst, der Code bleibt absolut valide, wie es das W3C verlangt.

Als erstes Beispiel wollen wir mal den rechten Außenabstand eines DIV Containers verändern. Natürlich in allen Browsern unterschiedlich. Also als erstes den DIV Container erstellen mit:

danach folgen üblicherweise über CSS eine Größenangabe für den Container, zb.

#container {width:150px;height:100px;}

und weitere Angaben, wie die Positionierung usw.

und jetzt die Weiche:

Gecko basierte Browser, also Mozilla z.B.
div[id="container"]{margin-right:5px;}

Safari+Opera
h\tml:f\irst-child>body div#container{margin-right:7px;}

Internet Explorer Version 4-6
* html div#container{margin-right:3px;}

Internet Explorer 5
html + body div#container{margin-right:8px;}

Internet Explorer 7
*+html div#container{margin-right:2px;}

Die Browsernamen gehören natürlich nicht in den Code. Man sollte unbedingt auch auf die Reihenfolge der Hacks achten. Es ist wichtig, die Weiche hinter die ursprüngliche und für alle anderen Browser gültige Anweisung zu setzen. Schreibt man sie davor, wird sie ja wieder aufgehoben vom regulären Code. Auch die Hacks können sich manchmal gegenseitig beeinflussen. So wie sie hier stehen, müsste es funktionieren. Um hier alles richtig zu machen, sollte man nach jeder Änderung seine Seite immer gleich im Browser überprüfen.

Wir könnten jetzt genauso die Farben in jedem Browser unterschiedlich anzeigen lassen. Über Sinn und Unsinn dieser Möglichkeit entscheiden Sie bitte selbst.

Für den Opera würden wir also folgendes schreiben:

h\tml:f\irst-child>body div#container{color:#ffffff;}

Jetzt wollen wir mal im Internet Explorer 7 ein anderes Hintergrundbild anzeigen lassen, das sich nicht wiederholt:

*+html div#container{background:url(../images/header.png) no-repeat;}

Das Prinzip dürfte klar sein. Auf diese Weise lassen sich viele Design Probleme lösen. Statt eines anderen Bildes könnte man auch das gleiche Bild mit anderen Abmessungen verwenden. Es sind viele Einsatzzwecke denkbar.

Man könnte zum Beispiel auch die rechte Scrollleiste im Opera oder Firefox erzwingen. Dadurch wird ein Ruckeln der Website verhindert, weil die Leiste nicht immer ein und ausgeblendet wird, je nach Höhe des Content. Beim Internet Explorer ist diese Leiste ja immer vorhanden.

Für Safari und Opera
h\tml:f\irst-child>body{height:101%;}

Für Firefox
html[xmlns="http://www.w3.org/1999/xhtml"]{height:100.05%;}

Die funktionsweise dieser Hacks ist schnell erklärt. Wenn ich das "*" Zeichen am Anfang der Code Zeile, gefolgt von html benutze, wird der gesamte nachfolgende Befehl von allen Browsern ignoriert, weil die Syntax falsch ist. Aber die Internet Explorer Version 4 bis 6 reagieren hier anders. Diese Versionen erlauben den Stern mit html und führen somit den nachfolgenden Code aus. Man muss also nur eine Syntax finden, die möglichst nur ein Browser versteht. Beziehungsweise man verwendet eben einen Hack, der speziell vom Browserentwickler erfunden wurde. Zu dem Stern mit html Hack, weiter unten mehr.

Conditional Comments

Conditional Comments sind spezielle HTML Kommentare. Mit diesen Kommentaren ist es möglich, speziell dem Internet Explorer für Windows ab der Version 5 eine eigene CSS Datei zu verordnen.

Das sieht dann zum Beispiel so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Conditional Comments</title>
<link rel="stylesheet" type="text/css" xhref="normale.css">

</head>
<body>
</body>
</html>

Hier eine Auflistung der verschiedenen Conditional Comments für den Internet Explorer:

Je nach Layout ist es natürlich nicht immer gleich notwendig, eine komplette CSS Datei extra für den Internet Explorer zu schreiben. Aber man erspart sich dadurch auch eine Menge Hacks. Und nicht alle Hacks sind valide.

Important Statement

Eine weitere Möglichkeit den Internet Explorer zu beeinflussen, ist das Important Statement. Eigentlich ist dieses Statement dafür da, eine Gewichtung von gleichen aufeinander treffenden Anweisungen vorzunehmen.

Man kann zum Beispiel in Opera oder Firefox und einigen anderen Browsern ein benutzerdefiniertes Stylesheet erstellen. Meist ganz simpel ohne Programmierkenntnisse in einem Menü. Da könnte man sich zum Beispiel für eine andere Schriftgröße oder Farbe entscheiden. Mit einem Important Statement kann aber der Webseitenbauer seiner Schriftgrößen-Einstellung den Vorrang geben. Wenn der User aber auch ein Important verwendet, bekommt er wieder oberste Priorität. Dies trifft aber in dieser Reihenfolge nur bei modernen Browsern zu, die CSS in Level 2 implementiert haben. Bei CSS Level 1 ist es genau andersrum. Da setzt sich also immer der Autor der Website durch.

Es wird wohl kaum ein Normaluser benutzerdefiniert eine Div-Box verkleinern oder vergrößern. Genauso wenig werden wir wohl die Schriftfarbe für Opera in Rot darstellen und im Internet Explorer in Gelb. Deshalb ist hier die Reihenfolge nicht so wichtig für uns.

Dies ist nur ein Beispiel. Es gibt noch mehr Kombinationen mit diesem Statement. Wir zweckentfremden jetzt einfach diesen Befehl, um gezielt den Internet Explorer anzusprechen. Hier wieder ein kleines Beispiel:

#content {width:100px!important; width:101px;}

Das DIV "content", wird in den Internet Explorern bis Version 6 eine Breite von 101 Pixel bekommen. Andere Browser, wie zum Beispiel der Firefox erhalten eine Breite von 100 Pixel.

Leider kommt es oft genug vor, daß von vier Browsern ganze drei, was anderes machen. In so einem Fall nützt uns dieses Vorgehen hier herzlich wenig. Überhaupt halte ich diese Methode hier für nicht empfehlenswert, gerade wenn sich nirgendwo auch nur ein Pixel verrücken soll. Und das ist in den allermeisten Fällen so.

Box Model

boxmodel

Das Boxmodel ist eines der wichtigsten Gestaltungsmöglichkeiten von CSS. Es handelt sich im Prinzip um eine viereckige Schachtel in deren innersten der Inhalt wie Bilder, Text usw. steht. Sie besteht von innen nach aussen gesehen aus folgenden Teilen:

- dem Content mit seiner Höhe und Breite. (height und width)
- dem Innenabstand (padding)
- dem Rahmen (border)
- dem Außenabstand (margin)

Leider wird gerade dieses immens wichtige Gestaltungsmittel nicht von allen Browsern gleich dargestellt. Das liegt im wesentlichen an der Interpretation von Margin, Padding und Border. Also dem Außenabstand, dem Innenabstand und dem Rahmen.

Die 5er Versionen des Internet Explorers für Windows setzen Padding und Border einfach in den Content. Nehmen wir mal an, der Content bekommt die Ausmaße von height 300 Pixel und width 500 Pixel. Als Innenabstand nehmen wir 5 Pixel. Der Außenabstand bekommt auch 5 Pixel. Der Rahmen bekommt eine Breite von 2 Pixel. Wir würden also zum Beispiel folgenden CSS Code schreiben, wenn wir ein DIV mit der ID content deklariert haben:

#content {
height: 300px;
width: 500px;
padding: 5px;
margin: 5px;
border: 2px;
}

Die 5er IE´s würden jetzt 2 Pixel border + 5 Pixel padding in den Content setzen. Der Content hätte jetzt also nur noch eine Abmessung von height: 286 Pixel (oben und unten 7 Pixel subtrahieren = 14 Pixel) und width: 486 Pixel (ebenfalls links und rechts jeweils 7 Pixel subtrahieren). Die Box hat jetzt die Ausmaße 300x500 Pixel + Außenabstand von 10 Pixel. Also oben und unten sowie links und rechts jeweils 5 Pixel. Demnach ergeben sich folgende Maße: height: 310 Pixel und width: 510 Pixel. Korrekt interpretiert ergäben sich eigentlich folgende Maße: height: 324 Pixel und width: 524 Pixel. Es fehlen also 14 Pixel. Wie lösen wir das Problem jetzt? Wir ändern die Größe des Content. Und zwar nur für den 5er Internet Explorer auf 314x514 Pixel. Rechnet man jetzt die 2x 5 Pixel Margin hinzu, dann stimmt alles. Puh, das verwirrt schon ein wenig stimmts?

Box Model Hack

Wir könnten jetzt den sogenannten Tantek-Hack benutzen. Benannt wurde er nach seinem Entwickler Tantek Celik, dem Chefentwickler der Microsoft Browser. Wir benutzen aber eine weiter entwickelte und vereinfachte Variante des Hacks. Den Tan-Hack, benannt nach Edwardson Tan. Die Internet Explorer 5+6 gehen wie bereits erwähnt, nicht Normgerecht mit dem Universal Selektor, also dem * Zeichen und nachfolgendem "html" um. Das nutzen wir aus. Zuerst schreiben wir die ganz normale komplette Anweisung für die ID Content, also #content {height: 300px;width:...usw.}

Danach kommt der Hack zum Einsatz:

* html #content {
height: 314px;
heigh\t: 300px;
}
* html #content {
width: 514px;
widt\h: 500px;
}

Hier kommt also das Escape Zeichen oder auch Backslash genannt zum Einsatz. Wo genau innerhalb width bzw. height das Escape Zeichen steht, ist dabei ziemlich egal. Die Anweisung kapiert der Internet Explorer 5 nicht, aber die Version 6 schon, solange sie im Standard Modus läuft. Den Universal-Selektor Bug haben nämlich beide.

Damit der Internet Explorer 6 im Standard Modus läuft, muss unbedingt der richtige Doctype angegeben sein. Ansonsten läuft der 6er im Quirks Mode und verhält sich genauso fehlerhaft wie die 5er Version. Aber weil die Version 6 mit den Escape Zeichen umgehen kann, würde dann der Hack nicht funktionieren und die Box wäre zu klein.

Mit dem Hack hat allerdings auch der Netscape Navigator 4 so seine Probleme. Auch für diesen Browser gäbe es Lösungen, die aber wieder andere Probleme mit sich brächten. Es lohnt sich mittlerweile nicht mehr, solch einen Aufwand zu betreiben für diese ohnehin nicht mehr genutzten uralten Fossilien. Da der alte Netscape Navigator mit Cascading Stylesheets nun wirklich nichts anfangen kann, sperren wir ihn am besten gleich mit @ import aus. Also zum Beispiel so:

@ import url("template.css");

Das versteht der nicht und liest die Datei erst gar nicht ein. Er wird also die Site als reinen Text anzeigen. Alle anderen Browser verwenden die Datei: template.css. Wie eine reine Textseite aussieht, könnte man mal mit einem Textbrowser wie Lynx testen. Ursprünglich für Unix entwickelt, ist der Browser auch in Windows sehr hilfreich bei der Entwicklung von barrierefreien Webseiten.

Doctype

Der Doctype beeinflusst die Darstellung der Website. Im Quirksmode läuft die Website für alte und für heutige Begriffe fehlerhafte Browser und muß auch entsprechend programmiert sein. Im Standard Modus läuft die Website für moderne Browser und der Code wäre für alte Browser größtenteils unverträglich. Die unterschiedlichen Modi einzustellen, nennt man auch Doctype-Switch. Damit der Tan Hack funktioniert, sollte folgendes deklariert werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

oder auch:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Die XML-Deklaration

Wichtig ist auch noch die XML-Deklaration. (Extensible Markup Language). Durch XML wird HTML zu XHTML, also erweitertem HTML könnte man vereinfacht sagen.

Die XML-Deklaration darf auf keinen Fall vor dem DOCTYPE stehen. Wir schreiben sie nicht davor, damit der Internet Explorer der Version 6 nicht in den Quirks Modus verfällt. Der Code bleibt valide, das Design nimmt keinen Schaden und kein Browser beschwert sich. Was will man mehr. So sieht zum Beispiel eine XML-Deklaration aus:

<?xml version="1.0" encoding="iso-8859-1"?>

Es ist nicht zwingend nötig, daß man die Deklaration angeben muss. Die meisten Webserver sind so konfiguriert, daß sie die Kodierung dem Browser über die Kopfzeilen der HTTP Antwort mitteilen.

Wichtig in diesem Zusammenhang ist vor allem der Parameter "encoding". Lässt man diesen weg, oder eben die gesamte Deklaration, wird alles in utf-8 codiert. Möglicherweise werden dann verschiedene Zeichen, wie zum Beispiel Umlaute nicht richtig angezeigt. Auch im Metatag sollte sich eine entsprechende Angabe zur Zeichenkodierung finden. Das sieht dann zum Beispiel so aus:

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
...restliche Metatags und Code innerhalb des Head-Bereich............... </head>

Dabei ist ISO-8859-1 meist die richtige Wahl für die Charset-Angabe in Westeuropa und somit auch in Deutschland.

Den Code validieren

Damit eine Site richtig angezeigt wird und den Standards entsprechend sauber gecodet ist, müssen wir sie noch überprüfen.

Hier gibt es wieder mehrere Möglichkeiten. Wer den Profi Web-Editor Dreamweaver verwendet, kann das innerhalb des Programmes schon während der Entwicklung machen. Aber auch andere Editoren bieten diese Möglichkeit mehr oder weniger gut an.

Sehr gute Validatoren gibt es auch Online. Zu unterscheiden sind (X)HTML und CSS Validatoren. Natürlich gibt es auch zu anderen Sprachen noch weitere Validatoren. Meist kann der Code automatisch angepasst werden (HTML-Tidy), so daß man sich viel Arbeit und vor allem Sucherei sparen kann. Das geht natürlich meistens nicht, wenn man nicht schon von vorneherein versucht hat, konformen Code zu produzieren.

Fazit

Man sollte sich von vorne herein an gewisse Regeln und Herangehensweisen halten. Mit der Berücksichtigung der hier angesprochenen Aspekte verhindert man schon mal eine ganze Reihe von Problemen. Dies ist wichtig, um irgendwann auch mal den kreativen Punkt zu erreichen und nicht vor lauter technischer Probleme doch noch an´s Aufgeben zu denken. Man könnte noch viel mehr in´s Detail gehen. Auch gäbe es noch weitere Punkte anzumerken. Bis hier hin erklärt sich jedoch schon, warum so manches am Anfang so unlogisch erscheint. Die anfänglichen Hürden sollten also genommen und ein befriedigendes Ergebnis erzielt werden können.