Beta-Phase

Diese Website befindet sich noch in der Beta-Phase und funktioniert in dieser leider nur unter Google Chrome.

Wenn du möchtest, kannst du dir den Browser hier herunterladen.

Browser(-optimierung)

Um die Notwendigkeit der Browser­optimierung ver­stehen zu können muss zu­nächst die Ge­schich­te des Webbrowsers kurz erläu­tert wer­den. Als das In­ternet 1993 noch in den Kinder­schuhen steck­te existier­te nur ein Pro­gramm um Web­sei­ten dar­zu­stel­len – der Brow­ser mosaic. Ge­stal­ter die ei­ne Web­seite pro­grammier­ten, muss­ten sich kei­ne Ge­danken über ihre Dar­stellung auf ver­schiede­nen Computern ma­chen.

Erst als die Konkurrenz der grafi­schen Brow­ser 1994 durch den Net­scape Naviga­tor und 1995 durch den In­ternet Explo­rer erwei­tert wurde began­nen die Pro­bleme. Denn um sich von der Konkurrenz abzuhe­ben wur­den die ein­zelnen Brow­ser Stück für Stück mit Erweiterun­gen verse­hen, die von an­de­ren Browserkonkurren­ten nicht ver­arbeitet wer­den konn­ten. Schon zu diesem Zeitpunkt muss­ten die Ge­stal­ter und Pro­grammie­rer über­prüfen, wie sich ihre Web­seite auf den ver­schiednen Browsern dar­stellt und verhält.

Nach­dem das Net­scape-Pro­jekt 1998 von AOL auf­gekauft und in den Ru­in getrie­ben wurde er­stand aus dem Quell­text des Browsers das Fi­refox-Pro­jekt. Die Besonderheit an diesem war, dass es im Ver­gleich zu al­len an­de­ren Browsern nicht kommerzi­ell sondern als Quell­offenes Pro­jekt geführt wurde. Wäh­rend die damaligen Haupt­akteu­re des Browser­krieges Ope­ra und Sa­fari an Markt­an­teil verloren, brach­te Goog­le ei­nen Brow­ser auf den Markt – Goog­le Chro­me. Nach anfängli­chen Schwie­rigkei­ten konnte die­ser sei­ne Marktpositi­on stärken und besonders dem In­ternet Explo­rer einige Benutzer abgewinnen.

Eigenheiten der Browser

Brow­ser verfolgen nur ein Ziel: Web­sei­ten dar­stel­len. Wie sie das tun ist lei­der recht un­ter­schiedlich. Ge­rade im Bezug auf Ab­stän­de (Rand­ab­stän­de, Objekt­ab­stän­de, Rah­men­ab­stän­de, Innen­ab­stän­de) wer­den Web­sei­ten sehr un­ter­schiedlich aus­gege­ben. Selbst inn­erhalb ei­ner Browserfa­milie gibt es inn­erhalb der Versionen (In­ternet Explo­rer 6, In­ternet Explo­rer 7) gravieren­de Un­ter­schiede. Selbst die Medi­en­ausgabe ist auf den ver­schiede­nen Browsern schwierig. Es existie­ren viele individuel­le Anweisun­gen, wel­che von konkurrie­ren­den Brow­ser ent­weder ignoriert oder teilweise falsch aus­gege­ben wer­den.

Standardkonformer CSS-Befehl
#div {margin: 10px;}

Jeder Brow­ser in­terpretiert die­se 10px an­ders. An sich ist das eben ge­nannte Bei­spiel ein stan­dardkon­for­mer Code und wird auch von Fi­refox so dar­ge­stellt, wie es gedacht ist. Der In­ternet Explo­rer, Sa­fari, Ope­ra und Chro­me wei­chen allerdings geringfügig von die­ser Dar­stellung ab. An diesem Punkt führt kein Weg daran vorbei als für jeden Brow­ser ei­ne Sonderregelung einzufügen. Die Abwei­chun­gen sind zwar nur mar­ginal, für ein kon­sistentes Ergebnis soll­ten allerdings alle Eventualitä­ten berücksichtigt wer­den.

Hack für Internet Explorer 6
* html #div {margin: 12px;}

Hack für Internet Explorer 7
* + html #div {margin: 13px;}

Hack für Safari und Chrome
body:nth-of-type(1) div {margin: 9px;}