Webseiten für verschiedene Browser optimieren

1 | 32786 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Webseiten für verschiedene Browser optimieren" mit Ihrem Wissen!

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:

  1. Standardsmode für die Webseite verwenden
  2. Webseite für einen sich möglichst an Webstandards haltenden Browser erstellen und testen
  3. In weiteren Browsern testen
  4. Wenn Probleme auftreten: Versuchen eine andere Technik zu verwenden
  5. Im Notfall: Eine Browserweiche verwenden

Was bedeutet optimiert?

Die verschiedenen Erwartungen an die Optimierung können grob in vier Stufen eingeteilt werden:

  1. "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.
  2. "Perfekt": Das Design soll bis auf winzigste Verschiebungen auf allen Browsern identisch aussehen.
  3. "Eingeschränkte Effekte": Einige Effekte werden nur in manchen Browsern dargestellt, z.B. abgerundete Ecken.
  4. "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.

 
HTML
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:

 
css
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

Wikiseite bearbeiten

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.

Mitarbeiter
  • 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