Fün Fin Fir

Nach einem Facelift vor einiger Zeit habe ich dieser Seite nun endlich, nach fast einem Jahr, mal ein (zumindest meiner Meinung nach ;) ) vernünftiges, wenn auch konservativeres Design verpasst. Dabei kamen auch einige neue Eigenschaften von CSS3 zum Einsatz, namentlich @font-face, box-shadow und border-radius. An manchen Stellen hat es mich doch verwundert, wie die einzelnen Browser darauf reagieren. Insgesamt kann man die Browser auf ihre Renderingengines runterbrechen:

• »Gecko« (Firefox, Thunderbird, Kazehakase, Liferea und einige weitere)
• »Webkit« (Safari, Chrome/Chromium, seit letztem September Epiphany und weitere), KHTML lassen wir hier mal ohne Wertung außen vor
• »Presto« (Opera)
• ach ja, und »Trident« (Internet Explorer)

Gecko

Im aktuellen Firefox 3.5 werden alle neuen Eigenschaften bereits umgesetzt, wobei man box-shadow und border-radius mit dem Präfix »-moz-« ansprechen muss. Die Schrift (Navigation, Überschriften) wird sauber durch den eingebundenen Font ersetzt, Boxen (siehe Kommentare) werfen Schatten, das Hauptfenster ist oben abgerundet. Interessanterweise ist das untere Ende nicht abgerundet, da ein innen liegender Container eine eigene Hintergrundfarbe hat, und die Rundung somit überdeckt. Ein Fehler im Rendering tritt auf, wenn Container mit Rahmen und Abrundung einen Schatten werfen.

Ältere Versionen von Gecko stellen immerhin die abgerundeten Ecken dar.

Firefox scheint ein Problem mit transparenten PNGs und mit »position: fixed;« positionierten Elementen zu haben. Die Geschwindigkeit beim Scrollen ist stark vermindert, es ruckelt und fühlt sich zäh an. Dadurch wirkt alles etwas behäbiger und langsamer.

Webkit

Chromium stellt die Seite fast identisch dar. Das Fontrendering ist wie gewohnt etwas feingliedriger und weicher. Alle drei neuen Effekte werden umgesetzt, dafür ist jedoch ebenso wie bei Gecko das Präfix »-webkit-« nötig.

Der selbe Fehler wie bei Gecko tritt auch hier auf, runde Ecken, Schatten und farbige Rahmen sind keine guten Freunde. Im Gegensatz zum Screenshot beendet meine lokale Installation von Chromium (4.0.249.43) die Seite direkt nach dem Container mit dem Impressum.

Auffällig ist, dass die per »position: absolute;« verschobenen Gravatarbilder in den Kommentarboxen anscheinend Platz im Kopfteil einnehmen, was eigentlich nicht der Fall sein sollte.

Der Fehler aus Firefox mit zu langsamen Scrollen tritt hier nicht auf (eigentlich logisch), der Browser zeigt sich äußerst reaktionsfreudig.

Presto

Opera schneidet in Sachen CSS3 in diesem Fall leider nicht sehr gut ab, keine der drei neuen Technologien wird hier unterstützt. Der selbe »Fehler« mit den Avatarbildern tritt auch hier auf. Bei meiner lokalen Installation (10.10) werden auch noch alle Formatierungen in den Überschriften geschluckt, sodass sie aussehen wie Fließtext. Auch werden manche Buchstaben verschluckt. Gefühlt ist Opera beim Scrollen sogar noch ein wenig schneller und reaktiver als Chromium.

Trident

Erwartungsgemäß wird nichts von den neuen Eigenschaften unterstützt, aber im Bestehenden eigentlich auch nicht viel falsch gemacht. Sogar wirklich alte Versionen wie 4.01 machen bei umsichtiger Gestaltung nichts kapital falsch.

Für Internet Explorer halte ich das für absolut ausreichend, meine Zielgruppe liegt ja auch wo anders. Immerhin versuchen die Entwickler mit der kommenden Version 9 in einigen Bereichen aufzuholen.

Fazit

Kein Browser hat mich total enttäuscht, aber jeder hat seine Macken. Die neuen Funktionen von CSS3 sind toll und können jetzt schon produktiv eingesetzt werden. Die Meinung, dass eine Internetseite auf jedem Ausgabegerät gleich aussehen muss ist nicht umsonst schon länger überholt. Wenn ein Browser heute schon Schatten darstellen kann, dann ist das schön, aber absolut kein Muss. Letztendlich sollte es immer noch auf den Inhalt ankommen.

Anhang: 29 Screenshots unter vielen unterschiedlichen Umgebungen. Danke an browsershots.org!