Webseiten für verschiedene Browser optimieren
Anzeige Hier werben
Diese Anleitung soll bei der Erstellung von browserübergreifend funktionierenden Seiten helfen und die Frage Für welche Browser muss ich optimieren? klären.
Desweiteren soll gezeigt werden wie Browserinkompatibilitäten vermieden und im Notfall welche Browserweichen am Besten zu verwenden sind.
Vorgehensweise
Die richtige Vorgehensweise kann den Aufwand der Optimierung erheblich verringern:
- Standardsmode für die Webseite verwenden
- Webseite für einen sich möglichst an Webstandards haltenden Browser erstellen und testen
- In weiteren Browsern testen
- Wenn Probleme auftreten: Versuchen eine andere Technik zu verwenden
- Im Notfall: Eine Browserweiche verwenden
Was bedeutet optimiert?
Die verschiedenen Erwartungen an die Optimierung können grob in vier Stufen eingeteilt werden:
- "Pixel für Pixel": Anspruch auf 100% identisches Aussehen in jedem Browser. Dies ist nur sehr schwer realisierbar und wird auch noch durch diverse browserunabhängige Faktoren wie beispielsweise die Bildschirmauflösung erschwert.
- "Perfekt": Das Design soll bis auf winzigste Verschiebungen auf allen Browsern identisch aussehen.
- "Eingeschränkte Effekte": Einige Effekte werden nur in manchen Browsern dargestellt, z.B. abgerundete Ecken.
- "Lesbar": Hier soll der Inhalt der Seite in jedem Browser lesbar sein, d.h. es sollen weder Teile der Webseite verdeckt oder unsichtbar sein, noch sollen Elemente übereinander liegen.
Diese Form der Optimierung geht davon aus, dass letztlich der Inhalt der Seite wichtiger ist das Design.
Prioritäten setzen
Da - vor allem im Arbeitsalltag als Webdesigner - ökonomisch effizient gearbeitet werden muss, ist es wichtig, Prioritäten zu setzen. So wird man in den meisten Fällen auf pixelgenaue Optimierung verzichten. Deckungsgleiche Pixel in verschiedenen Browsern fallen sowieso nur bei direktem hintereinender betrachten auf. Solange es in beiden Browsern für sich alleine gut aussieht kann man also solch kleine Unstimmigkeiten getrost belassen.
In sehr alten Browsern kann man auch nur so optimieren, dass die Seite noch Benutzbar ist. Das Verzichten auf perfekte Darstellungen in diesen alten Browsern und vor allem dem IE6 kann viel Zeit sparen.
Für welche Browser sollte optimiert werden?
Hier kann kein pauschaler Rat gegeben werden. Für welche Browser optimiert werden soll und in welchem Umfang hängt von der persönlichen Vorliebe, der Zielgruppe und bei einer Auftragsarbeit vor allem von dern Wünschen des Kunden ab.
Sehr alte Browser wie Netscape 4 oder Internet Explorer vor Version 6 (beide mit Marktanteilen von unter 0,4%) können getrost beiseite gelassen werden. Hier wäre die Optimierung auch unglaublich aufwändig.
Kriterium von Optimierung: private Seite oder nach Vorgaben eines Kunden?
Die folgende Tabelle ist nur als Richtlinie zu sehen. Von Projekt zu Projekt ändern sich die Anforderungen, eine pauschale Aussage kann nicht getroffen werden.
| Browser |
Stufe |
Aufwand |
Marktanteil |
Anmerkung |
| Safari 3, Firefox >= 2, Opera 9 |
perfekt |
sehr gering |
ca. 38% | Bei Beachtung von Webstandards sollte hier das Aussehen und die Funktionalität automatisch identisch und problemlos sein. |
| IE7 |
perfekt |
mittel |
ca. 33% | Anpassung mittels Conditional Comments |
| IE 6 |
lesbar | hoch |
ca. 25% |
Aufwendigste relevante Optimierung derzeit. Nicht zwingend notwendig. |
| Safari < 3 |
lesbar | gering | < 0,2% |
Irrelevanter Marktanteil und von Haus aus gute Kompatibilität |
| Opera < 9 |
ignorieren |
gering | < 0,1% |
Irrelevanter Marktanteil und von Haus aus gute Kompatibilität |
| Netscape 4, IE < 6 |
ignorieren | sehr hoch |
< 0,3% |
Irrelevanter Marktanteil |
Stand: April 2008. Quelle: FlashCounter, mehrheitlich deutschsprachiges Web. Weitere Informationen in unseren aktuellen Browser-Marktanteilen.
Opera Mini und iPhone werden hier aufgrund des geringen Marktanteils bisher nicht gelistet. Diese Beiden Browser liefern aber von Haus aus sehr gute Ergebnisse, die sehr mit den Darstellungen der zugehörigen Desktopbrowser Opera und Safari übereinstimmen. Mit dem Opera Mini Simulator kann man sich aber schnell vergewissern, dass die Darstellung auf dem Mobiltelefon gut aussieht.
Wenn Probleme auftreten
Als Erstes sollte man versuchen den Fehler einzugrenzen, indem man bestimmte Teile des Stylesheets auskommentiert oder Werte variiert. Dann ist es meistens einfacher die genauer Ursache zu finden. Ist der Problem-Browser der Internet Explorer lässt sich schnell ein alternatives Stylesheet mittels Conditional Comments einbinden.
Möglichkeiten die Seite anzupassen: Browserweichen und Hacks
Lässt sich der Fehler auch nicht durch eine andere Herangehensweise lösen, muss man für verschiedene Browser verschiedene Versionen ausliefern.
Bei allen Browserweichen und Hacks um einen Fehler zu umgehen sollte man immer beachten: Zukünftige Browser werden den Fehler wahrscheinlich behoben haben! Deshalb sollte man Browserweichen nie nur nach dem Browsernamen/-typ sondern immer zusammen mit der Versionsnummer einstellen.
Ein Fehler der im Internet Explorer 6 auftritt ist vielleicht im 7er nicht mehr vorhanden. Hat man aber eine angepasste Version für den Internet Explorer allgemein, kann man unerwartete Ergebnisse in zukünftigen Browsern erhalten.
Browserweiche durch auslesen des Browsernamens
Keine Browser ausschließen
Auch wenn ihre Webseite in einem Browser nicht funktioniert sollten sie ihn dennoch nicht ausschließen! In späteren Versionen könnte die Seite funktionieren. Ausserdem reicht dem Besucher vielleicht auch schon die fehlerhafte/eingeschränkte Darstellung.
Nicht empfehlenswert: Im Browser Opera ist beispielsweise einstellbar, als welcher Browser sich dieser ausgibt.
CSS Hacks
Schlechte Methode, da unbekannte Resultate in zukünftigen Browsern (siehe IE7 Einführung). Machen manchmal Browser invalide. erlassen sich zu stark auf die CSS Implementierung.
Conditional Comments
Die im Internet Explorer ab Version 5 verfügbaren conditional comments sind ein guter Weg um die aufwändige Optimierung für den Internet Explorer zu bewältigen.
Hierbei wird ein HTML Kommentar mit einem bestimmten Format eingebunden. Der Inhalt wird von allen Browsern außer dem Internet Explorer Ignoriert.
Vorteile: Hauptstylesheet wird nicht verschmutzt (ist valide). Keinen Einfluß auf zukünftige Browser. Andere Browser müssen das Stylesheet nicht runterladen.
1 2 3 | <!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
|
| ! | nicht |
| lt |
kleiner als |
| lte | kleiner als oder gleich |
| gt | größer als |
| gte | größer als oder gleich |
Es ist zu Empfehlen nicht allgemein "if IE" zu benutzen, da neuere Versionen des IE möglicherweise die Seite auch ohne spezielles Stylesheet anzeigen können.
CSS Rückwärtskompatibilität
Wie CSS mit unbekannten Eigenschaften umgeht kann auch zur Anpassung an alte Browser benutzt werden.
Selektoren benutzen, die bestimme ältere Browser nicht verstehen
Verwendet man Selektoren, die Alte Browser nicht kennen, kann man somit CSS-Regeln verstecken.
Der Internet Explorer 6 ist zum Beispiel der einzige noch benutze Browser, der den > Selektor (Element ist direktes Kindelement eines Anderen) nicht versteht.
Schreibt man also zum Beispiel folgende Regel:
1
2
3
4
5
6 | body #header {
width: 100px;
}
body > #header {
width: 120px;
}
|
Werden alle Browser(FF, IE7, Safari, Opera) bis auf den IE6 die Breite auf 120px setzen. Der IE6 wird sie aber 100px setzen. Vorteil dieser Methode ist, dass neue Versionen des Browsers, der eine verbesserte Unterstützung der Standards hat, evtl. den Selektor verstehen und damit automatisch den richtigen Wert sehen. Nachteil ist allerdings, dass es keine Garantie gibt, dass beide Dinge zur selben Zeit mit einer neuen Version behoben werden. Deswegen ist diese Methode auch nicht zu empfehlen.
Todo an diesem Artikel
- Browserweichen, Conditional Comments etc in eigene Bereiche ausgliedern
- Browserweichen für Javascript (oder eher das Testen auf bestimmte fähigkeiten
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Webseiten für verschiedene Browser optimieren" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Webseiten für verschiedene Browser optimieren" hier bearbeiten.
-
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
-
David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
-
Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
-
ist seit ein paar Jahren mal mehr mal weniger am Webprogrammieren. Werbung: anfritz.de
Yaml als Framework
Servus,
ich habe lange versucht eine ordentlich Seite hinzubekommen und stieß auf yaml www.yaml.de - das ist ein HTML-CSS-Framework was standardmäßig eine anpassbare Schablone bietet, die angepasst werden kann, und bereits zahlreiche Überlegungen berücksichtigt.
IE7
Ich find den IE 7 irgendwie schlimmer als 6.
Liegt aber vermutlich daran, dass man für den schon seit längerem anpassen muss :)
Re: IE7
Komisch. Für den IE7 benötige ich inzwischen oft kein eigenes Stylesheet mehr, beim IE6 hingegen schon.
Re: IE7
Ehrlich gesagt, finde ich es etwas übertrieben, jedesmal gleich ein weiteres Stylesheet wegen irgendeiner IE Version einzubinden. Mittels Stern-Hack oder Stern-Plus-Hack bekommt man eigentlich immer alles hin... finde ich. Zudem bin ich nicht der Meinung, dass CSS-Hacks keine schlechte Methode sind, denn dass zum Beispiel der IE7 dabei etwas falsch interpretiert, kam bei mir noch nicht vor...