Websites für Firefox und Internet Explorer optimieren
Juchu! Endlich fertig mit dem Stylesheet. Alles funktioniert, es sieht super aus – hoch auf den Server damit. Wenige Minuten später: Ein Besucher schreibt in die Kommentare, dass die Website total verschoben ist, die Schriftgrößen nicht stimmen und das Floating total in die Hose gegangen ist. Er surft mit dem Internet Explorer. Noch besser: Mit der Version 6.
Fakten
Damit so etwas nicht passiert, sollten Website-Ersteller ihr Werk für mehrere Browser optimieren. Es kommt nicht darauf an, welche Browser am schönsten sind oder welche die W3C-Standards möglichst genau umsetzen (leider!), sondern welche vom Besucher benutzt werden. Für Webdesigner sieht’s da gar nicht so rosig aus – hier einige aktuelle Zahlen: (Quelle, Stand: September 2007)
- Internet Explorer 7 20,8 Prozent
- Internet Explorer 6 34,9 Prozent
- Firefox 35,4 Prozent
- Rest 8,9 Prozent
Microsofts Internet Explorer dominiert mit mehr als 50 Prozent also immer noch den Markt. Ein großer Grund dafür ist die Verbreitung des Betriebssystems Windows, auf dem der Internet Explorer vorinstalliert ist. Folglich muss für den Internet Explorer in beiden Versionen (6 und 7) optimiert werden – denn das sind letztendlich die meisten Besucher einer Website.
Wie erstelle ich nun am besten meine Website?
Natürlich gibt es viele Wege zur Website, die in allen Browsern (nahezu) gleich aussieht. Natürlich gibt es auch kurze und lange Wege. Ich beschreibe die Methode, wie ich vorgehe – bisher bin ich damit immer ganz gut gefahren.
1. HTML
Zuerst wird das HTML geschrieben. Dabei sollte die Dokumenttyp-Deklaration (Doctype) direkt am Anfang festgelegt werden – so bleibt der Quelltext einheitlich und kann validiert werden.
2. Stylesheet für den Firefox
Farben und Struktur bringt das Stylesheet in die Website. Ich empfehle, erst das Stylesheet für den Firefox zu schreiben. Das sollte kein größeres Problem sein – gerade für etwas fortgeschrittenere Benutzer.
3. Stylesheet für den Internet Explorer 7
An dieser Stelle wird der erste Blick in Microsofts aktuellsten Browser geworfen. Normalerweise dürften sich hier nicht allzugroße Probleme auftun – die 7er-Version hat sich im Gegensatz zur 6er enorm gebessert. Eventuell müssen hier und da noch einige IE-spezifische Dinge angepasst werden, wie beispielsweise das »centern«.
4. Stylesheet für den Internet Explorer 6
Der IE6 ist das eigentliche Sorgenkind, das sich an keine Regeln hält und möglichst alles tut um sich von anderen Browsern abzuheben – im negativen Sinne betrachtet. Gerade hier kann es Probleme mit dem Floating sowie padding- und margin-Angaben kommen. Einziger Tipp: Ruhe bewahren und viel ausprobieren – mit der Zeit »lernt« man, wie sich der IE6 verhält.
Viele, wenn nicht sogar die meisten Probleme wurden schon behandelt und entsprechende Workarounds geschrieben. Ein bisschen Googlen kann an der Stelle schon helfen.
5. Den Firefox nicht aus dem Auge verlieren
Bei der Optimierung des IE6, sollte zwischendurch immer wieder ein Blick auf den Firefox geworfen werden – nicht dass die Änderungen im Stylesheet hier alles durcheinander schmeißen.
6. Blick über den Tellerrand
Auch wenn nun die wichtigsten Browser die Website richtig darstellen, schadet ein Blick auf weitere Browser wie beispielsweise den Opera oder Safari nicht. Wenn möglich, sollte die Website auch auf verschiedenen Betriebssystemen getestet werden.
Das muss man nicht wenn man ein eigenes Stylesheet anlegt das sich nur um den IE 6 kümmert. Durch einen kleinen Codeschnipsel wird diese CSS auch nur dann aktiviert wenn man mit dem IE 6 surft ;-) …
Hat mir letztens sehr aus der Patsche geholfen!!!
Jo, stimmt, hatte ich ganz vergessen ;-)
Bei einer Sache möchte ich widersprechen.
Eine Website, die es schon länger gibt, verfügt ja schon über ein paar Statistikdaten. Schau doch da rein, ich wette, hier surfen fast keine Leute mit dem IE6.
Im IE7 läuft mein Design glaube ich, alles andere ist mir egal :-)
Ich wollte den Artikel möglichst allgemein halten ;-) Natürlich nutze ich auch in erster Linie meine eigenen Daten – trotzdem optimiere ich für alle Browser.
By the way: Hier treiben sich zu rund 60 Prozent Firefox-Benutzer rum, weniger als 30 Prozent benutzen den Internet Explorer (6 und 7 sind halbe halbe). Ich komme also auf etwa 15 Prozent IE6-Nutzer ;-) (und das sind bestimmt die, die über Google kommen ;-))
Hallöle!
An einer Stelle kann ich nicht folgen, bzw. möchte ich widersprechen:
Ich denke es ist niemals gut, von vorne herein browserspizifische Stylesheets anzulegen!
Zum einen denke ich, zu viele Hacks, noch schlimmer Workarounds können darauf schließen, das nicht vorher auf dem Papier gedacht wurde, sondern gleich in den Editor gehackt.
Zum anderen sehe ich nach der Anwendung von Resets, wie z.b. dem Meyer-Reset keinen Grund für große Hacks, da die meisten Probleme schon ausgemergelt wurden. Etwaige Probleme lassen sich so meist in einem Stylesheets per Conditional-Comment oder Sternchen-Selektor beheben.
Sieht man nun – was oft nur bei großen Projekten mit modularem Aufbau passiert – dass man mit den Comments und kleineren Hacks nicht auskommt, so ist es dann vielleicht die Schlussfolgerung ein extra Stylesheet anzulegen.
–
Das soll übrigens kein Genörgel sein, nur eine andere Herangehensweise, Blogs sind ja zum Anregungen holen und verteilen da (-;
Feinste Grüße aus wob!
Ich sehe die hier vorgeschlagene Vorgehensweise auch eher kritisch. Zum Einen sollte man – meiner bescheidenen Meinung nach – erst einmal »logisch« layouten: Markup und Stylesheet so anlegen, wie es der definierten Logik halber funktionieren sollte. Wenn man dann wegen einiger Browsermängel etwas modifizieren muss, ist das weit weniger anstrengend, als von vornherein anhand des Browsers zu arbeiten. Auch der Firefox macht einige Sachen falsch, bitte nicht vergessen. Wenn man dann allzu sehr auf den Firefox »optimiert«, läuft man imho Gefahr, bei korrekter Interpretation wiederum keine »logische« Variante zu haben.
Allgemein finde ich die »Optimierung« auf unterschiedliche Browser eher unvorteilhaft. Okay, um manchen Tweak kommt man nicht herum, aber vieles lässt sich schon dadurch vermeiden, dass man das typische Verhalten des IE6 mit der Zeit kennen lernt und dadurch vielleicht viel allgemeinere Herangehensweisen verinnerlicht. Und wenn dann doch mal Optimierungen nötig sind, siehe Jared: Conditional Comments sind anerkanntes Mittel, genau das Problem, dass man durch Tweaks wiederum andere Browser »reverse« beeinflusst, zu vermeiden.
Was auch ein kleineres Streitthema ist, ist der CSS-Reset. Es wird gesagt, dass ein Sternchen-Reset mitunter sehr rechenaufwändig sein kann, wodurch es Leistungseinbussen des Browsers provozieren kann. Gut, ich selbst hab so etwas noch nicht »gespürt«, logisch wäre es jedoch. Und mal ehrlich: Ein Overall-Reset ist auch nicht immer bitter nötig. Abstände von Textauszeichnungen wie Absatz und Überschrift generell zu nullen ist… nunja, mehr Kontrolle, aber manchmal auch zuviel des Guten. Wobei mir gerade einfällt, dass die Browserhersteller mal endlich so manchen margin durch padding ersetzen sollten oder umgekehrt – man kennt ja solche Schoten wie das auseinanderdriften von Layoutelementen wegen einer nahegelegenen Überschrift ;-)
Was ich an dem Artikel jedoch gut finde, ist die Intention, einfach mal einen generellen Workflow vorzuschlagen. Das ist doch mit Sicherheit ausbaufähig :-)
Aus dem Grund schreib‘ ich doch ;-)
Um mal ein allgemeines Missverständnis zu klären:
Natürlich sollte nicht sofort »browserspezifisch« geschrieben werden, sondern erst nach Logik, wie Arne schon geschrieben hat. Doch schon beim Schreiben wirft man doch einen Blick in den Browser. Und hier empfehle ich nicht auf den verbreiteten IE zu schauen, sondern auf Browser, die den Code besser interpretieren. Hier als Beispiel den Firefox, da er eine sehr große Verbreitung hat. (Klar, auch er macht nicht alles richtig – z.B. ein bekanntes Problem: Bei
width: 100%;werdenpadding-Angaben addiert).Ich möchte auch nicht dazu aufrufen, für den Firefox zu schreiben, das Stylesheet so zu lassen, und dann nur noch Hacks schreiben. Alexander und Arne haben ja schon als Beispiel den CSS-Reset genannt, der viele Probleme ausschließt. Zudem dann noch so Anweisungen wie etwa
!important, die vom IE6 übergangen werden.Danke für euer Feedback!